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

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/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/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,

package/package.json

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