@dative-gpi/foundation-shared-components 1.0.71 → 1.0.74

package/components/FSBreadcrumbs.vue

@@ -1,5 +1,6 @@
 <template>
   <v-breadcrumbs
+    class="fs-breadcrumbs"
     :items="$props.items"
     :style="style"
     v-bind="$attrs"

package/components/FSCard.vue

@@ -105,7 +105,7 @@ export default defineComponent({
     const { getColors, getGradients } = useColors();
 
     const colors = computed(() => {
-      if(Array.isArray(props.color)) {
+      if (Array.isArray(props.color)) {
         return getColors(props.color[0]);
       }
       return getColors(props.color);
@@ -115,6 +115,23 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
+    const borderColor = computed((): ColorBase => {
+      switch (props.variant) {
+        case "background":
+          return lights.dark;
+        case "standard"  :
+          if (Array.isArray(props.color)) {
+            return colors.value.lightContrast!;
+          }
+          if (([ColorEnum.Background, ColorEnum.Light, ColorEnum.Dark] as ColorBase[]).includes(props.color)) {
+            return lights.dark;
+          }
+          return colors.value.lightContrast!;
+        case "full"      : return colors.value.base;
+        case "gradient"  : return colors.value.lightContrast!;
+      }
+    });
+
     const style = computed((): StyleValue => {
       switch (props.variant) {
         case "background": return {
@@ -125,7 +142,7 @@ export default defineComponent({
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": backgrounds.base,
-          "--fs-card-border-color"    : lights.dark,
+          "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : darks.base
         }
         case "standard": return {
@@ -136,7 +153,7 @@ export default defineComponent({
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": colors.value.light,
-          "--fs-card-border-color"    : colors.value.lightContrast!,
+          "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.lightContrast!
         }
         case "full": return {
@@ -147,7 +164,7 @@ export default defineComponent({
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": colors.value.base,
-          "--fs-card-border-color"    : colors.value.base,
+          "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.baseContrast!
         }
         case "gradient": return {
@@ -158,7 +175,7 @@ export default defineComponent({
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": gradients.value.base,
-          "--fs-card-border-color"    : colors.value.lightContrast!,
+          "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.lightContrast!
         }
       }

package/components/FSDialogContent.vue

@@ -1,6 +1,6 @@
 <template>
   <FSCard
-    padding="24px 8px 24px 24px"
+    padding="24px"
     gap="24px"
     :class="$props.cardClasses"
     :color="$props.color"
@@ -9,9 +9,7 @@
     <template
       #header
     >
-      <FSCol
-        padding="0 16px 0 0"
-      >
+      <FSCol>
         <FSRow
           align="center-left"
           :wrap="false"

package/components/FSDialogFormBody.vue

@@ -12,16 +12,13 @@
         gap="24px"
       >
         <FSFadeOut
-          padding="0 8px 0 0"
           :maxHeight="maxHeight"
         >
           <slot
             name="body"
           />
         </FSFadeOut>
-        <FSRow
-          padding="0 16px 0 0"
-        >
+        <FSRow>
           <slot
             name="left-footer"
           />
@@ -60,16 +57,13 @@
       gap="24px"
     >
       <FSFadeOut
-        padding="0 8px 0 0"
         :maxHeight="maxHeight"
       >
         <slot
           name="validation"
         />
       </FSFadeOut>
-      <FSRow
-        padding="0 16px 0 0"
-      >
+      <FSRow>
         <slot
           name="left-footer"
         />

package/components/FSDialogMultiFormBody.vue

@@ -22,16 +22,13 @@
           gap="24px"
         >
           <FSFadeOut
-            padding="0 8px 0 0"
             :maxHeight="maxHeight"
           >
             <slot
               :name="`step-${step}`"
             />
           </FSFadeOut>
-          <FSRow
-            padding="0 16px 0 0"
-          >
+          <FSRow>
             <slot
               name="left-footer"
             />

package/components/FSDialogRemove.vue

@@ -43,7 +43,6 @@
       v-if="$props.removing"
     >
       <FSRow
-        padding="0 16px 0 0"
         align="center-right"
         :height="footerHeight"
       >

package/components/FSDialogSubmit.vue

@@ -11,7 +11,6 @@
       #body
     >
       <FSFadeOut
-        padding="0 8px 0 0"
         :maxHeight="maxHeight"
       >
         <slot
@@ -25,9 +24,7 @@
       <slot
         name="footer"
       >
-        <FSRow
-          padding="0 16px 0 0"
-        >
+        <FSRow>
           <slot
             name="left-footer"
           />

package/components/FSFadeOut.vue

@@ -4,7 +4,7 @@
     ref="fadeOutRef"
     :id="elementId"
     :style="style"
-    @scroll="debounceMasks"
+    @scroll="$emit('scroll', $event); debounceMasks()"
   >
     <slot />
   </div>
@@ -45,10 +45,25 @@ export default defineComponent({
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "64px"
+    },
+    scrollOutside: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    disableTopMask: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disableBottomMask: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ["scroll"],
-  setup(props, { emit }) {
+  setup(props) {
     const { windowHeight, windowWidth } = useBreakpoints();
     const { debounce } = useDebounce();
     const { getColors } = useColors();
@@ -69,9 +84,11 @@ export default defineComponent({
       "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : undefined,
       "--fs-fade-out-width"             : sizeToVar(props.width),
       "--fs-fade-out-padding"           : sizeToVar(props.padding),
+      "--fs-fade-out-with-offset"       : props.scrollOutside ? '12px' : '0px',
+      "--fs-fade-out-padding-offset"    : props.scrollOutside ? '4px' : '0px',
       "--fs-fade-out-mask-color"        : backgrounds.base,
-      "--fs-fade-out-top-mask-height"   : topMaskHeight.value,
-      "--fs-fade-out-bottom-mask-height": bottomMaskHeight.value
+      "--fs-fade-out-top-mask-height"   : props.disableTopMask ? '0px' : topMaskHeight.value,
+      "--fs-fade-out-bottom-mask-height": props.disableBottomMask ? '0px' : bottomMaskHeight.value
     }));
 
     const handleMasks = () => {
@@ -94,19 +111,19 @@ export default defineComponent({
           topMaskHeight.value = sizeToVar(props.maskHeight);
         }
 
-        const event = {
-          target: fadeOutRef.value,
-          onTop: topMaskHeight.value === "0px",
-          onBottom: bottomMaskHeight.value === "0px",
-          goingUp: (fadeOutRef.value as any).scrollTop < lastScroll.value,
-        };
+        // const event = {
+        //   target: fadeOutRef.value,
+        //   onTop: topMaskHeight.value === "0px",
+        //   onBottom: bottomMaskHeight.value === "0px",
+        //   goingUp: (fadeOutRef.value as any).scrollTop < lastScroll.value,
+        // };
 
-        emit("scroll", event);
+        // emit("scroll", event);
         lastScroll.value = (fadeOutRef.value as any).scrollTop;
       }
     };
 
-    const debounceMasks = (): void => debounce(handleMasks, 50);
+    const debounceMasks = (): void => debounce(handleMasks, 1);
 
     onMounted((): void => {
       debounceMasks();

package/components/FSIconCard.vue

@@ -58,7 +58,7 @@ export default defineComponent({
     iconColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Dark
     },
     iconVariant: {
       type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,

package/components/autocompletes/FSAutoCompleteAddress.vue

@@ -3,8 +3,8 @@
     :clearable="false"
     :toggleSet="false"
     :multiple="false"
-    :items="places"
-    :modelValue="modelValuePlace"
+    :items="items"
+    :modelValue="$props.modelValue?.placeId"
     @update:modelValue="onUpdate"
     v-model:search="search"
     v-bind="$attrs"
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref, watch } from "vue";
+import { computed, defineComponent, ref } from "vue";
 
 import { type Address, type Place } from "@dative-gpi/foundation-shared-domain/models";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
@@ -38,7 +38,15 @@ export default defineComponent({
     const { search: searchAddress, get: getAddress  } = useAddress();
 
     const places = ref<Place[]>([]);
-    const modelValuePlace = ref<Place | null>(null);
+
+    const items = computed(() => {
+      if(props.modelValue) {
+        const currentPlace = addressToPlace(props.modelValue);
+        const searchedPlaces = places.value.filter((place) => place.id !== currentPlace.id);
+        return [currentPlace, ...searchedPlaces];
+      }
+      return places.value;
+    });
 
     const fetch = async (search: string | null) => {
       if (search === null) {
@@ -69,7 +77,9 @@ export default defineComponent({
       (item) => (item).id,
       (item) => (item).label,
       true,
-      false
+      false,
+      0,
+      500
     );
 
     const addressToPlace = (address: Address): Place => {
@@ -79,23 +89,9 @@ export default defineComponent({
       };
     };
 
-    onMounted(() => {
-      if(!props.modelValue) {
-        return;
-      }
-      modelValuePlace.value = addressToPlace(props.modelValue);
-    });
-
-    watch(() => props.modelValue, (newValue) => {
-      if(!newValue) {
-        return;
-      }
-      modelValuePlace.value = addressToPlace(newValue);
-    });
-
     return {
-      modelValuePlace,
       places,
+      items,
       search,
       onUpdate
     };

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -9,16 +9,17 @@
     >
       <FSBadge
         :content="badgeLabel"
-        :color="criticityColor"
+        :color="AlertTools.criticityColor($props.deviceWorstAlert?.criticity)"
       >
         <FSColorIcon
           class="fs-stopclick"
-          size="m"
-          :color="criticityColor"
+          :padding="$props.padding"
+          :color="AlertTools.criticityColor($props.deviceWorstAlert?.criticity)"
+          :size="$props.size"
           @click.prevent.stop
           v-bind="props"
         >
-          {{ statusIcon }}
+          {{ AlertTools.statusIcon($props.deviceWorstAlert?.status) }}
         </FSColorIcon>
       </FSBadge>
     </template>
@@ -34,8 +35,7 @@
 import { computed, defineComponent, type PropType, ref } from "vue";
 
 import { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
-import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
 
 import FSWorstAlertCard from "./FSWorstAlertCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
@@ -62,32 +62,19 @@ export default defineComponent({
       type: Function,
       required: false,
       default: null
+    },
+    size: {
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
+      default: "m"
+    },
+    padding: {
+      type: [String, Number] as PropType<string | number>,
+      default: "8px"
     }
   },
   setup(props) {
     const menu = ref(false);
 
-    const criticityColor = computed(() => {
-      switch (props.deviceWorstAlert?.criticity) {
-        case Criticity.Error: return ColorEnum.Error;
-        case Criticity.Warning: return ColorEnum.Warning;
-        default: return ColorEnum.Primary;
-      }
-    });
-
-    const statusIcon = computed(() => {
-      switch (props.deviceWorstAlert?.status) {
-        case AlertStatus.Pending:     return "mdi-timer-outline";
-        case AlertStatus.Untriggered: return "mdi-timer-off-outline";
-        case AlertStatus.Unresolved:  return "mdi-alert-circle-outline";
-        case AlertStatus.Resolved:    return "mdi-check-circle-outline";
-        case AlertStatus.Expired:     return "mdi-clock-outline";
-        case AlertStatus.Triggered:   return "mdi-alert-circle-outline";
-        case AlertStatus.Abandoned:   return "mdi-cancel"
-        default:                      return "";
-      }
-    });
-
     const badgeLabel = computed((): string | null => {
       if (!props.deviceAlerts || props.deviceAlerts.length < 1) {
         return null;
@@ -99,8 +86,7 @@ export default defineComponent({
     });
 
     return {
-      criticityColor,
-      statusIcon,
+      AlertTools,
       badgeLabel,
       menu
     };

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -9,19 +9,19 @@
     >
       <FSChip
         :label="$tr('ui.common.alert', 'Alert')"
-        :prependIcon="statusIcon"
-        :color="criticityColor"
+        :prependIcon="AlertTools.statusIcon($props.deviceAlert?.status)"
+        :color="AlertTools.criticityColor($props.deviceAlert?.criticity)"
       />
       <FSCol
         align="center-center"
         gap="0px"
       >
         <FSText>
-          {{ $tr('ui.alert.status', 'Status') }} : {{ statusLabel }}
+          {{ $tr('ui.alert.status', 'Status') }} : {{ AlertTools.statusLabel($props.deviceAlert?.status) }}
         </FSText>
         <FSText
           font="text-button"
-          :color="criticityColor"
+          :color="AlertTools.criticityColor($props.deviceAlert?.criticity)"
         >
           {{ $props.deviceAlert.label }}
         </FSText>
@@ -46,11 +46,9 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { type FSDeviceAlert} from "@dative-gpi/foundation-shared-components/models";
-import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
+import { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
 
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
@@ -81,41 +79,6 @@ export default defineComponent({
   emits: ["close"],
   setup(props) {
     const { epochToLongTimeFormat } = useDateFormat();
-    const { $tr } = useTranslationsProvider();
-
-    const criticityColor = computed(() => {
-      switch (props.deviceAlert?.criticity) {
-        case Criticity.Error: return ColorEnum.Error;
-        case Criticity.Warning: return ColorEnum.Warning;
-        default: return ColorEnum.Primary;
-      }
-    });
-
-    const statusIcon = computed(() => {
-      switch (props.deviceAlert?.status) {
-        case AlertStatus.Pending:     return "mdi-timer-outline";
-        case AlertStatus.Untriggered: return "mdi-timer-off-outline";
-        case AlertStatus.Unresolved:  return "mdi-alert-circle-outline";
-        case AlertStatus.Resolved:    return "mdi-check-circle-outline";
-        case AlertStatus.Expired:     return "mdi-clock-outline";
-        case AlertStatus.Triggered:   return "mdi-alert-circle-outline";
-        case AlertStatus.Abandoned:   return "mdi-cancel"
-        default:                      return "";
-      }
-    });
-
-    const statusLabel = computed(() => {
-      switch (props.deviceAlert?.status) {
-        case AlertStatus.Pending:     return $tr("ui.alert-status.pending", "Pending");
-        case AlertStatus.Untriggered: return $tr("ui.alert-status.untriggered", "Untriggered");
-        case AlertStatus.Unresolved:  return $tr("ui.alert-status.unresolved", "Unresolved");
-        case AlertStatus.Resolved:    return $tr("ui.alert-status.resolved", "Resolved");
-        case AlertStatus.Expired:     return $tr("ui.alert-status.expired", "Expired");
-        case AlertStatus.Triggered:   return $tr("ui.alert-status.triggered", "Triggered");
-        case AlertStatus.Abandoned:   return $tr("ui.alert-status.abandoned", "Abandoned");
-        default:                      return "";
-      }
-    });
 
     const deviceTimestamp = computed((): string => {
       if (props.deviceAlert.sourceTimestamp) {
@@ -126,9 +89,7 @@ export default defineComponent({
 
     return {
       deviceTimestamp,
-      criticityColor,
-      statusLabel,
-      statusIcon
+      AlertTools
     };
   }
 });

package/components/fields/FSAutocompleteField.vue

@@ -127,6 +127,7 @@
         #body
       >
         <FSSearchField
+          :clearable="$props.clearable"
           :hideHeader="true"
           v-model="search"
         />

package/components/lists/FSFilterButton.vue

@@ -23,11 +23,10 @@
       :border="false"
     >
       <FSCol
-        padding="16px 0 24px 16px"
+        padding="20px"
         gap="12px"
       >
         <FSCol
-          padding="0 16px 0 0"
           gap="12px"
         >
           <FSSpan
@@ -44,17 +43,15 @@
             :editable="true"
             @click="onToggleAll"
           />
-          <FSDivider
-            padding="0 8px 0 0"
-          />
+          <FSDivider />
           <FSSearchField
+            :hideHeader="true"
             class="fs-filter-button-search"
             prependInnerIcon="mdi-magnify"
             v-model="search"
           />
         </FSCol>
         <FSFadeOut
-          padding="0 8px 0 0"
           maxHeight="360px"
         >
           <FSCol

package/components/lists/FSHiddenButton.vue

@@ -21,11 +21,10 @@
       :border="false"
     >
       <FSCol
-        padding="16px 0px 24px 16px"
+        padding="24px"
         gap="12px"
       >
         <FSCol
-          padding="0 16px 0 0"
           gap="12px"
         >
           <FSSpan
@@ -35,7 +34,6 @@
           </FSSpan>
         </FSCol>
         <FSFadeOut
-          padding="0 8px 0 0"
           maxHeight="360px"
         >
           <FSCol

package/components/lists/FSSimpleList.vue

@@ -5,14 +5,12 @@
   >
     <FSSearchField
       v-if="$props.searchable"
-      padding="0 12px 0 0"
       :hideHeader="true"
       :modelValue="actualSearch"
       placeholder="Search"
       @update:modelValue="onSearch"
     />
     <FSFadeOut
-      padding="0 4px 0 0"
       :maxHeight="$props.maxHeight"
       :maskHeight="0"
     >

package/components/map/FSMapLayerButton.vue

@@ -16,7 +16,6 @@
     >
       <FSRow
         align="center-center"
-        padding="0 16px 0 0"
       >
         <FSImageCard
           v-for="layer in layers"

package/components/tiles/FSSimpleTileUI.vue

@@ -44,7 +44,7 @@
           v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
           :backgroundColor="$props.iconBackgroundColor"
-          :iconColor="$props.activeColor"
+          :iconColor="$props.iconColor"
           :border="$props.iconBorder"
           :icon="$props.icon"
           :size="imageSize"
@@ -112,6 +112,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
     activeColor: {
       type: String as PropType<ColorBase>,
       required: false,