@dative-gpi/foundation-shared-components 1.0.66 → 1.0.68

package/components/FSIconCard.vue

@@ -58,7 +58,7 @@ export default defineComponent({
     iconColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Dark
+      default: ColorEnum.Primary
     },
     iconVariant: {
       type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
@@ -68,7 +68,7 @@ export default defineComponent({
     iconSize: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "56px"
+      default: "42px"
     },
     border: {
       type: Boolean,

package/components/FSSlideGroup.vue

@@ -59,6 +59,16 @@ export default defineComponent({
     FSButton
   },
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -92,7 +102,9 @@ export default defineComponent({
       "--fs-group-padding"     : sizeToVar(props.padding),
       "--fs-group-gap"         : sizeToVar(props.gap),
       "--fs-group-color"       : darks.soft,
-      "--fs-group-hover-color" : darks.dark
+      "--fs-group-hover-color" : darks.dark,
+      "--fs-group-width"       : sizeToVar(props.width),
+      "--fs-group-height"      : sizeToVar(props.height)
     }));
 
     const nextClasses = computed((): string[] => {

package/components/FSTabs.vue

@@ -7,7 +7,7 @@
     :style="style"
     :grow="true"
     :modelValue="$props.tab"
-    @update:modelValue="$emit('update:tab', $event)"
+    @update:modelValue="onUpdateTab($event)"
     v-bind="$attrs"
   >
     <slot/>
@@ -15,7 +15,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { computed, defineComponent, onMounted, type PropType, type StyleValue } from "vue";
+import { useRouter } from "vue-router";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -24,7 +25,7 @@ export default defineComponent({
   name: "FSTabs",
   props: {
     tab: {
-      type: Number,
+      type: [String, Number, Object] as PropType<any>,
       required: false,
       default: 0
     },
@@ -32,10 +33,17 @@ export default defineComponent({
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
+    },
+    recordNavigation: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  setup(props) {
+  emits: ["update:tab"],
+  setup(props, { emit }) {
     const { getColors } = useColors();
+    const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
@@ -51,8 +59,22 @@ export default defineComponent({
       "--fs-tab-tag-color"              : colors.value.baseContrast!
     }));
 
+    const onUpdateTab = (tab: number): void => {
+      if (props.recordNavigation) {
+        router.replace({ query: { tab: tab.toString() } });
+      }
+      emit("update:tab", tab);
+    }
+
+    onMounted((): void => {
+      if (props.recordNavigation && router.currentRoute.value.query.tab) {
+        emit("update:tab", router.currentRoute.value.query.tab);
+      }
+    });
+
     return {
-      style
+      style,
+      onUpdateTab
     };
   }
 });

package/components/FSWrapGroup.vue

@@ -29,6 +29,16 @@ import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid";
 export default defineComponent({
   name: "FSWrapGroup",
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -55,7 +65,9 @@ export default defineComponent({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
       "--fs-group-color"      : darks.soft,
-      "--fs-group-hover-color": darks.dark
+      "--fs-group-hover-color": darks.dark,
+      "--fs-group-height"     : sizeToVar(props.height),
+      "--fs-group-width"      : sizeToVar(props.width)
     }));
 
     onMounted((): void => {

package/components/lists/FSDataTableUI.vue

@@ -446,7 +446,7 @@
               v-for="(item, index) in items"
               elementSelector=".fs-draggable-item"
               :disabled="draggableDisabled"
-              :item="item"
+              :item="{ ...item, index }"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
               @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
@@ -617,7 +617,7 @@
               v-for="(item, index) in items.filter((item) => item.type === 'item')"
               elementSelector=".fs-draggable-item"
               :disabled="draggableDisabled"
-              :item="item"
+              :item="{ ...item, index }"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
               @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
@@ -1360,10 +1360,10 @@ export default defineComponent({
     };
 
     const resetRowIndex = (initialIndex: number, currentIndex: number, draggedElement: HTMLElement, tbodyElement: HTMLElement) => {
-      if (initialIndex > currentIndex) {
+      if (initialIndex > currentIndex && tbodyElement.children[initialIndex]) {
         tbodyElement.children[initialIndex].insertAdjacentElement("afterend", draggedElement);
       }
-      else {
+      else if(tbodyElement.children[initialIndex]) {
         tbodyElement.children[initialIndex].insertAdjacentElement("beforebegin", draggedElement);
       }
     };

package/components/lists/FSDraggable.vue

@@ -74,7 +74,7 @@ export default defineComponent({
           const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
           dragged.classList.add("fs-draggable-dragging");
           dragged.classList.add("fs-draggable-dragging-grabbegin");
-          dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+          dragged.dataset.initialIndex = props.item.index;
           event.preventDefault();
         }
       }, mobileGrabThreshold);
@@ -171,7 +171,7 @@ export default defineComponent({
         return;
       }
       const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
-      dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+      dragged.dataset.initialIndex = props.item.index;
       event.dataTransfer?.setDragImage(dragged, 25, 25);
       
       if (event.dataTransfer) {

package/components/map/FSMapLayerButton.vue

@@ -9,6 +9,7 @@
     v-model="dialog"
     width="500px"
     :title="$tr('ui.map.select-layer', 'Select layer')"
+    :contained="true"
   >
     <template
       v-slot:body

package/components/tiles/FSLocationTileUI.vue

@@ -6,81 +6,81 @@
     :width="$props.width"
     v-bind="$attrs"
   >
-    <FSRow
+    <FSCol
       align="center-center"
-      width="100%"
-      gap="24px"
-      :wrap="false"
+      width="fill"
     >
-      <FSCol 
-        gap="12px"
-        width="100%"
-        class="fs-location-tile-text-container"
+      <FSRow
+        align="center-left"
+        gap="24px"
+        :height="imageSize"
+        :wrap="false"
       >
-        <FSCol
-          gap="6px"
+        <FSCol 
+          gap="12px"
+          :width="infoWidth"
         >
-          <FSSpan
-            font="text-button"
-            :lineClamp="1"
+          <FSCol
+            gap="6px"
           >
-            {{ $props.label }}
-          </FSSpan>
-          <FSSpan
-            v-if="$props.code"
-            font="text-overline"
-            variant="soft"
-          >
-            {{ $props.code }}
-          </FSSpan>
-        </FSCol>
-        <FSRow
-          :wrap="false"
-          align="center-left"
-        >
-          <FSColor
-            padding="0 8px"
-            height="24px"
-            :color="ColorEnum.Light"
-            :border="false"
+            <FSSpan
+              font="text-button"
+              :lineClamp="1"
+            >
+              {{ $props.label }}
+            </FSSpan>
+            <FSSpan
+              v-if="$props.code"
+              font="text-overline"
+              variant="soft"
+            >
+              {{ $props.code }}
+            </FSSpan>
+          </FSCol>
+          <FSRow
+            :wrap="false"
+            align="center-left"
           >
-            <FSRow
-              align="center-center"
+            <FSColor
+              padding="0 8px"
+              height="24px"
+              :color="ColorEnum.Light"
+              :border="false"
             >
-              <FSSpan
-                font="text-overline"
+              <FSRow
+                align="center-center"
               >
-                {{ $props.deviceCount }}
-              </FSSpan>
-            </FSRow>
-          </FSColor>
-          <FSSpan
-            font="text-overline"
-          >
-            {{ $tr("ui.common.devices", "Devices") }}
-          </FSSpan>
-        </FSRow>
-      </FSCol>
-      <FSCol
-        width="hug"
-      >
+                <FSSpan
+                  font="text-overline"
+                >
+                  {{ $props.deviceCount }}
+                </FSSpan>
+              </FSRow>
+            </FSColor>
+            <FSSpan
+              font="text-overline"
+            >
+              {{ $tr("entity.location.devices", "Devices") }}
+            </FSSpan>
+          </FSRow>
+        </FSCol>
         <FSIconCard
-          :icon="$props.icon"
+          backgroundVariant="standard"
+          :backgroundColor="ColorEnum.Background"
           :iconColor="$props.color"
-          size="100px"
-          iconSize="38px"
-          variant="background"
-          :border="true"
+          :icon="$props.icon"
+          :size="imageSize"
         />
-      </FSCol>
-    </FSRow>
+      </FSRow>
+    </FSCol>
   </FSTile>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSIconCard from "../FSIconCard.vue";
 import FSColor from "../FSColor.vue";
@@ -110,11 +110,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    color: {
-      type: String,
-      required: false,
-      default: () => ColorEnum.Primary
-    },
     icon: {
       type: String,
       required: false,
@@ -125,20 +120,37 @@ export default defineComponent({
       required: false,
       default: 0
     },
-    modelValue: {
-      type: Boolean,
+    color: {
+      type: String as PropType<ColorBase>,
       required: false,
-      default: false
+      default: ColorEnum.Primary
     },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: () => [352, 336]
     },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
   },
   setup() {
+    const { isMobileSized } = useBreakpoints();
+
+    const imageSize = computed((): number => {
+      return isMobileSized.value ? 90 : 100;
+    });
+
+    const infoWidth = computed((): string => {
+      return `calc(100% - ${imageSize.value}px - 24px)`;
+    });
+
     return {
-      ColorEnum
+      ColorEnum,
+      imageSize,
+      infoWidth
     };
   }
 });

package/components/tiles/FSSimpleTileUI.vue

@@ -44,6 +44,7 @@
           v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
           :backgroundColor="$props.iconBackgroundColor"
+          :iconColor="$props.activeColor"
           :border="$props.iconBorder"
           :icon="$props.icon"
           :size="imageSize"
@@ -99,7 +100,7 @@ export default defineComponent({
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
       required: false,
-      default: "background"
+      default: "standard"
     },
     iconBackgroundColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,

package/components/views/FSSkeletonView.vue

@@ -4,7 +4,7 @@
   >
     <FSCol
       padding="16px 4px 16px 12px"
-      height="100vh"
+      height="100%"
       gap="16px"
     >
       <slot

package/package.json

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

package/styles/components/fs_slide_group.scss

@@ -1,5 +1,10 @@
 .fs-slide-group {
+    height: var(--fs-group-height);
+    width: var(--fs-group-width);
+    max-width: 100%;
+
     & > .v-slide-group__container > .v-slide-group__content {
+        margin: 0 2px 1px 0 !important;
         padding: var(--fs-group-padding);
         gap: var(--fs-group-gap);
     }

package/styles/components/fs_wrap_group.scss

@@ -1,4 +1,8 @@
 .fs-wrap-group {
+    height: var(--fs-group-height);
+    width: var(--fs-group-width);
+    max-width: 100%;
+
     & > .v-slide-group__container > .v-slide-group__content {
         padding: var(--fs-group-padding);
         gap: var(--fs-group-gap);

package/styles/globals/overrides.scss

@@ -182,16 +182,6 @@ $nthOverlay: 25;
   }
 }
 
-/***** Applies to all slide groups (FSTabs, FSSlideGroup, FSWrapGroup) *****/
-.fs-slide-group {
-    max-width: 100%;
-    
-    // To avoid borders clipping
-    & > .v-slide-group__container > .v-slide-group__content {
-        margin: 0 2px 1px 0 !important;
-    }
-}
-
 // On touchscreen, hide arrows
 // Otherwise show small ones with base text color
 .v-slide-group__prev,

package/utils/filter.ts

@@ -1,4 +1,7 @@
 export const containsSearchTerm = (obj: any, searchTerm: string): boolean => {
+  if (obj == null) {
+    return false;
+  }
   if (typeof obj === 'object') {
     return Object.values(obj).some(value => containsSearchTerm(value, searchTerm));
   }
@@ -12,4 +15,4 @@ export const filterItems = <T>(items: T[], filter: string): T[] => {
   const searchTerm = filter.toLowerCase();
 
   return items.filter(item => containsSearchTerm(item, searchTerm));
-};
+};