@dative-gpi/foundation-shared-components 1.0.160 → 1.0.161-alert-tile

package/components/FSSlider.vue

@@ -1,85 +1,55 @@
 <template>
-  <FSCol>
-    <slot
-      name="label"
-    >
-      <FSRow
-        :wrap="false"
+  <FSBaseField
+    :label="$props.label"
+    :description="$props.description"
+    :required="$props.required"
+    :disabled="$props.disabled"
+    :style="style"
+  >
+    <FSRow>
+      <v-slider
+        hide-details
+        class="fs-slider"
+        width="100%"
+        :color="$props.color"
+        :disabled="$props.disabled"
+        :ripple="false"
+        :trackSize="6"
+        :elevation="0"
+        :tickSize="4"
+        :modelValue="$props.modelValue ?? undefined"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        v-bind="$attrs"
       >
-        <FSSpan
-          v-if="$props.label"
-          class="fs-slider-label"
-          font="text-overline"
-          :style="style"
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
         >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          style="margin-left: -8px;"
-          class="fs-slider-label"
-          font="text-overline"
-          :ellipsis="false"
-          :style="style"
-        >
-          *
-        </FSSpan>
-      </FSRow>
-    </slot>
-    <v-slider
-      class="fs-slider"
-      hide-details
-      :disabled="$props.disabled"
-      :ripple="false"
-      :style="style"
-      :elevation="0"
-      :tickSize="4"
-      :modelValue="$props.modelValue ?? undefined"
-      @update:modelValue="$emit('update:modelValue', $event)"
-      v-bind="$attrs"
-    >
-      <template
-        v-for="(_, name) in $slots"
-        v-slot:[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="slotData"
-        />
-      </template>
-    </v-slider>
-    <slot
-      name="description"
-    >
-      <FSSpan
-        v-if="$props.description"
-        class="fs-slider-description"
-        font="text-overline"
-        :lineClamp="2"
-        :style="style"
-      >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
-  </FSCol>
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </v-slider>
+    </FSRow>
+  </FSBaseField>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { useColors } from '@dative-gpi/foundation-shared-components/composables';
+
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSSpan from "./FSSpan.vue";
-import FSCol from "./FSCol.vue";
-import FSRow from "./FSRow.vue";
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
 
 export default defineComponent({
   name: "FSSlider",
   components: {
-    FSSpan,
-    FSCol,
-    FSRow
+    FSRow,
+    FSBaseField
   },
   props: {
     label: {
@@ -118,26 +88,20 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
       if (props.disabled) {
         return {
-          "--fs-slider-cursor"     : "default",
-          "--fs-slider-track-color": lights.base,
-          "--fs-slider-thumb-color": lights.base,
-          "--fs-slider-color"      : lights.dark
+          "--fs-slider-thumb-color": lights.base
         };
       }
       return {
-        "--fs-slider-cursor"     : "pointer",
-        "--fs-slider-track-color": colors.value.light,
-        "--fs-slider-thumb-color": colors.value.base,
-        "--fs-slider-color"      : darks.base
+        "--fs-slider-thumb-color": colors.value.base
       };
     });
 
     return {
+      colors,
       style
     };
   } 

package/components/lists/FSDataTableUI.vue

@@ -17,19 +17,24 @@
         align="top-left"
       >
         <FSRow
-          v-if="$props.showSearch || filterableHeaders.length > 0 || $slots['append-toolbar']"
+          v-if="$props.showSearch || $slots['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"
-          />
+          <template
+            v-if="$props.showSearch"
+          >
+            <FSSearchField
+              v-if="$props.showSearch"
+              :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"

package/components/map/FSMap.vue

@@ -233,7 +233,7 @@ export default defineComponent({
     }));
 
     const actualLayer = computed(() => {
-      return layers.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers ?? layers[0].layers;
+      return layers.value.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers;
     });
 
     const overlaySlots = computed(() => {

package/components/tiles/FSEntityCountBadge.vue

@@ -0,0 +1,72 @@
+<template>
+  <FSRow
+    align="center-left"
+  >
+    <FSColor
+      height="24px"
+      :color="$props.color"
+      :border="false"
+    >
+      <FSRow
+        align="center-center"
+        width="24px"
+      >
+        <FSSpan
+          font="text-overline"
+        >
+          {{ badgeContent }}
+        </FSSpan>
+      </FSRow>
+    </FSColor>
+    <FSSpan
+      font="text-overline"
+    >
+      {{ $props.label }}
+    </FSSpan>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSColor from "../FSColor.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSEntityCountBadge",
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    count: {
+      type: Number,
+      required: true
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: () => ColorEnum.Primary
+    }
+  },
+  components: {
+    FSColor,
+    FSSpan,
+    FSRow
+  },
+  setup(props){
+
+    const badgeContent = computed(() => capNumberToString(props.count));
+
+    return {
+      ColorEnum,
+      badgeContent
+    };
+  }
+});
+</script>

package/components/tiles/FSFolderTileUI.vue

@@ -6,7 +6,26 @@
     :iconBorder="false"
     :icon="$props.icon"
     v-bind="$attrs"
-  />
+  >
+    <template
+      #append-info
+    >
+      <FSCol
+        gap="6px"
+      >
+        <FSEntityCountBadge
+          :label="$tr('ui.common.folders', 'Folder(s)')"
+          :count="recursiveFoldersIds.length"
+          :color="ColorEnum.Primary"
+        />
+        <FSEntityCountBadge
+          :label="$tr('ui.common.dashboards', 'Dashboard(s)')"
+          :count="recursiveDashboardsIds.length"
+          :color="ColorEnum.Success"
+        />
+      </FSCol>
+    </template>
+  </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
@@ -14,7 +33,9 @@ import { computed, defineComponent, type PropType } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSEntityCountBadge from './FSEntityCountBadge.vue';
 import FSSimpleTileUI from "./FSSimpleTileUI.vue";
+import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSFolderTileUI",
@@ -28,10 +49,22 @@ export default defineComponent({
       type: String,
       required: false,
       default: "mdi-folder-outline"
-    }
+    },
+    recursiveFoldersIds: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    recursiveDashboardsIds: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
   },
   components: {
-    FSSimpleTileUI
+    FSEntityCountBadge,
+    FSSimpleTileUI,
+    FSCol
   },
   setup(props){
     const color = computed(() => {
@@ -42,7 +75,8 @@ export default defineComponent({
     });
 
     return {
-      color
+      color,
+      ColorEnum
     };
   }
 });

package/components/tiles/FSGroupTileUI.vue

@@ -16,82 +16,36 @@
       <FSCol
         gap="6px"
       >
-        <FSRow
-          align="center-left"
-        >
-          <FSColor
-            height="24px"
-            width="24px"
-            :color="ColorEnum.Primary"
-            :border="false"
-          >
-            <FSRow
-              align="center-center"
-            >
-              <FSSpan
-                font="text-overline"
-              >
-                {{ groupsBadgeContent }}
-              </FSSpan>
-            </FSRow>
-          </FSColor>
-          <FSSpan
-            font="text-overline"
-          >
-            {{ $tr("ui.common.groups", "Group(s)") }}
-          </FSSpan>
-        </FSRow>
-        <FSRow
-          align="center-left"
-        >
-          <FSColor
-            height="24px"
-            width="24px"
-            :color="ColorEnum.Success"
-            :border="false"
-          >
-            <FSRow
-              align="center-center"
-            >
-              <FSSpan
-                font="text-overline"
-              >
-                {{ deviceOrganisationsBadgeContent }}
-              </FSSpan>
-            </FSRow>
-          </FSColor>
-          <FSSpan
-            font="text-overline"
-          >
-            {{ $tr("ui.common.devices", "Device(s)") }}
-          </FSSpan>
-        </FSRow>
+        <FSEntityCountBadge
+          :label="$tr('ui.common.groups', 'Group(s)')"
+          :count="recursiveGroupsIds.length"
+          :color="ColorEnum.Primary"
+        />
+        <FSEntityCountBadge
+          :label="$tr('ui.common.devices', 'Device(s)')"
+          :count="recursiveDeviceOrganisationsIds.length"
+          :color="ColorEnum.Success"
+        />
       </FSCol>
     </template>
   </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
-
-import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
+import { defineComponent, type PropType } from "vue";
 
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSEntityCountBadge from './FSEntityCountBadge.vue';
 import FSSimpleTileUI from './FSSimpleTileUI.vue';
-import FSColor from "../FSColor.vue";
-import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSGroupTileUI",
   components: {
+    FSEntityCountBadge,
     FSSimpleTileUI,
-    FSColor,
-    FSSpan,
-    FSCol,
-    FSRow
+    FSCol
   },
   props: {
     imageId: {
@@ -134,14 +88,8 @@ export default defineComponent({
       default: () => [352, 336]
     },
   },
-  setup(props) {
-    const groupsBadgeContent = computed(() => capNumberToString(props.recursiveGroupsIds.length));
-
-    const deviceOrganisationsBadgeContent = computed(() => capNumberToString(props.recursiveDeviceOrganisationsIds.length));
-
+  setup() {
     return {
-      deviceOrganisationsBadgeContent,
-      groupsBadgeContent,
       ColorEnum,
     };
   }

package/components/tiles/FSLocationTileUI.vue

@@ -15,46 +15,25 @@
       <FSCol
         gap="8px"
       >
-        <FSRow
-          v-if="$props.deviceCount"
-          :wrap="false"
-          align="center-left"
-        >
-          <FSColor
-            width="24px"
-            height="24px"
-            :color="ColorEnum.Primary"
-            :border="false"
-          >
-            <FSRow
-              align="center-center"
-            >
-              <FSSpan
-                font="text-overline"
-              >
-                {{ capNumberToString($props.deviceCount) }}
-              </FSSpan>
-            </FSRow>
-          </FSColor>
-          <FSSpan
-            font="text-overline"
-          >
-            {{ $tr("ui.common.devices", "Equipment(s)") }}
-          </FSSpan>
-        </FSRow>
+        <FSEntityCountBadge
+          v-if="$props.deviceCount !== undefined"
+          :label="$tr('ui.common.devices', 'Device(s)')"
+          :count="$props.deviceCount"
+          :color="ColorEnum.Primary"
+        />
         <FSRow
           v-if="$props.address"
           :wrap="false"
           align="center-left"
         >
           <FSColor
-            width="24px"
             height="24px"
             :color="ColorEnum.Primary"
             :border="false"
           >
             <FSRow
               align="center-center"
+              width="24px"
             >
               <FSIcon
                 icon="mdi-map-marker-radius-outline"
@@ -79,6 +58,7 @@ import { defineComponent, type PropType } from "vue";
 import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSEntityCountBadge from './FSEntityCountBadge.vue';
 import FSSimpleTileUI from './FSSimpleTileUI.vue';
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
@@ -88,6 +68,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSLocationTileUI",
   components: {
+    FSEntityCountBadge,
     FSSimpleTileUI,
     FSColor,
     FSSpan,

package/composables/useMapLayers.ts

@@ -1,62 +1,69 @@
-import { tileLayer } from 'leaflet';
-
+import { ref, onMounted } from "vue";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-
 import { MapLayers } from '@dative-gpi/foundation-shared-components/models';
 
 export const useMapLayers = () => {
   const { $tr } = useTranslationsProvider();
-
   const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "";
 
-  const layers = [
-    {
-      name: MapLayers.Map,
-      label: $tr("ui.map-layer.map", "Map"),
-      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,
-          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-          attribution: '© Google Map Data',
-          className: 'fs-map-tile-base-layer'
-        })
-      ]
-    },
-    {
-      name: MapLayers.Imagery,
-      label: $tr("ui.map-layer.imagery", "Imagery"),
-      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,
-          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-          attribution: '© Google Map Data',
-          className: 'fs-map-tile-base-layer'
-        })
-      ]
-    },
-    {
-      name: MapLayers.Snow,
-      label: $tr("ui.map-layer.snow", "Snow ski map"),
-      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,
-          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-          attribution: '© Google Map Data',
-          className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
-        }),
-        tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
-          maxZoom: 18,
-          attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & ODbL, &copy; <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
-          className: 'fs-map-tile-base-layer'
-        })
-      ]
+  const layers = ref<any[]>([]);
+
+  onMounted(async () => {
+    try {
+      const leaflet = await import('leaflet');
+      const tileLayer = leaflet.tileLayer;
+
+      layers.value = [
+        {
+          name: MapLayers.Map,
+          label: $tr("ui.map-layer.map", "Map"),
+          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,
+              subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+              attribution: '© Google Map Data',
+              className: 'fs-map-tile-base-layer'
+            })
+          ]
+        },
+        {
+          name: MapLayers.Imagery,
+          label: $tr("ui.map-layer.imagery", "Imagery"),
+          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,
+              subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+              attribution: '© Google Map Data',
+              className: 'fs-map-tile-base-layer'
+            })
+          ]
+        },
+        {
+          name: MapLayers.Snow,
+          label: $tr("ui.map-layer.snow", "Snow ski map"),
+          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,
+              subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+              attribution: '© Google Map Data',
+              className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
+            }),
+            tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
+              maxZoom: 18,
+              attribution: 'Map data: &copy; OpenStreetMap contributors & ODbL, CC-BY-SA',
+              className: 'fs-map-tile-base-layer'
+            })
+          ]
+        }
+      ];
+    } catch (err) {
+      console.error("Leaflet is not installed or failed to load.", err);
+      layers.value = [];
     }
-  ];
+  });
 
-  return {
-    layers
-  };
-}
+  return { layers };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.160",
+  "version": "1.0.161-alert-tile",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.160",
-    "@dative-gpi/foundation-shared-services": "1.0.160"
+    "@dative-gpi/foundation-shared-domain": "1.0.161-alert-tile",
+    "@dative-gpi/foundation-shared-services": "1.0.161-alert-tile"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "c427a9c163483d60edaadb93a11c58283cab96c2"
+  "gitHead": "21e74ffda11147c0413a3424fe0df561560bcab3"
 }