@dative-gpi/foundation-shared-components 1.0.159 → 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/FSTagGroup.vue

@@ -15,7 +15,7 @@
     <slot />
   </FSWrapGroup>
   <FSSlideGroup
-    v-if="$props.variant === 'slide'"
+    v-else-if="$props.variant === 'slide'"
     v-bind="$attrs"
   >
     <FSTag
@@ -36,12 +36,14 @@ import { defineComponent, type PropType } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSSlideGroup from '@dative-gpi/foundation-shared-components/components/FSSlideGroup.vue';
 import FSWrapGroup from "./FSWrapGroup.vue";
 import FSTag from "./FSTag.vue";
 
 export default defineComponent({
   name: "FSTagGroup",
   components: {
+    FSSlideGroup,
     FSWrapGroup,
     FSTag
   },

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/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -29,7 +29,7 @@
         </FSRow>
         <FSCol
           v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
-          :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} ${$slots.toolbar ? '12px' : '0px'} 12px`"
+          :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
           gap="16px"
         >
           <FSCol>
@@ -108,7 +108,7 @@ export default defineComponent({
     toolbarTopOffset: {
       type: String,
       required: false,
-      default: "72px" 
+      default: "52px" 
     },
     stickyTitleTopOffset: {
       type: String,