@dative-gpi/foundation-shared-components 1.0.156-maps → 1.0.156

package/components/FSAccordionPanel.vue

@@ -6,32 +6,47 @@
     :disabled="false"
     :elevation="0"
     :style="style"
+    :hideActions="$props.actionPosition === 'start'"
     v-bind="$attrs"
   >
-    <template
-      #title
-    >
-      <slot
-        name="title"
+    <v-expansion-panel-title>
+      <template
+        v-slot:default="{ expanded, collapseIcon, expandIcon }"
       >
-        <FSRow>
-          <FSIcon
-            v-if="$props.prependIcon"
+        <FSRow
+          gap="4px"
+        >
+          <FSCol
+            v-if="$props.actionPosition === 'start'"
+            width="hug"
+            align="center-center"
           >
-            {{ $props.prependIcon }}
-          </FSIcon>
-          <FSSpan
-            class="fs-accordion-panel-title"
-            :lineClamp="$props.lineClampTitle"
+            <FSIcon
+              size="22.5px"
+              :icon="expanded ? collapseIcon : expandIcon"
+            />
+          </FSCol>
+          <slot
+            name="title"
           >
-            {{ $props.title }}
-          </FSSpan>
+            <FSRow>
+              <FSIcon
+                v-if="$props.prependIcon"
+              >
+                {{ $props.prependIcon }}
+              </FSIcon>
+              <FSSpan
+                class="fs-accordion-panel-title"
+                :lineClamp="$props.lineClampTitle"
+              >
+                {{ $props.title }}
+              </FSSpan>
+            </FSRow>
+          </slot>
         </FSRow>
-      </slot>
-    </template>
-    <template
-      #text
-    >
+      </template>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
       <slot
         name="content"
       >
@@ -47,7 +62,7 @@
           :modelValue="$props.content"
         />
       </slot>
-    </template>
+    </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
@@ -128,6 +143,10 @@ export default defineComponent({
       type: String as PropType<"standard" | "rich-text">,
       required: false,
       default: "standard"
+    },
+    actionPosition: {
+      type: String as () => "start" | "end",
+      default: "end"
     }
   },
   setup(props) {

package/components/FSCard.vue

@@ -68,6 +68,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -103,6 +108,11 @@ export default defineComponent({
       required: false,
       default: "solid"
     },
+    borderColor: {
+      type: [Array, String] as PropType<ColorBase | null | string>,
+      required: false,
+      default: null
+    },
     elevation: {
       type: Boolean,
       required: false,
@@ -129,6 +139,10 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const borderColor = computed((): ColorBase => {
+      if (props.borderColor) {
+        return getColors(props.borderColor).base;
+      }
+
       switch (props.variant) {
         case "background":
           return lights.dark;
@@ -154,6 +168,7 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": backgrounds.base,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : darks.base,
@@ -166,6 +181,7 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": colors.value.light,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.lightContrast!,
@@ -178,6 +194,7 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": colors.value.base,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.baseContrast!,
@@ -190,6 +207,7 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": gradients.value.base,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.lightContrast!,

package/components/FSChip.vue

@@ -1,7 +1,9 @@
 <template>
   <component
-    :is="$props.to ? 'FSRouterLink' : 'div'"
+    :is="$props.to && $props.clickable ? 'FSRouterLink' : 'div'"
+    class="fs-chip-container"
     v-bind="$props.to ? { to: $props.to } : {}"
+    @click="$emit('click', $event)"
   >
     <FSRow
       :align="$props.align"
@@ -69,7 +71,6 @@ export default defineComponent({
     FSSpan,
     FSRow
   },
-  inheritsAttrs: false,
   props: {
     prependIcon: {
       type: String as PropType<string | null>,
@@ -122,6 +123,8 @@ export default defineComponent({
       default: null
     },
   },
+  inheritsAttrs: false,
+  emits: ['click'],
   setup(props) {
     const { getColors } = useColors();
 
@@ -136,9 +139,9 @@ export default defineComponent({
           "--fs-chip-background-color"       : backgrounds.base,
           "--fs-chip-border-color"           : colors.value.base,
           "--fs-chip-color"                  : colors.value.base,
-          "--fs-chip-hover-background-color" : backgrounds.base,
+          "--fs-chip-hover-background-color" : colors.value.base,
           "--fs-chip-hover-border-color"     : colors.value.base,
-          "--fs-chip-hover-color"            : colors.value.base,
+          "--fs-chip-hover-color"            : colors.value.baseContrast!,
           "--fs-chip-active-background-color": backgrounds.base,
           "--fs-chip-active-border-color"    : colors.value.dark,
           "--fs-chip-active-color"           : colors.value.dark
@@ -148,8 +151,8 @@ export default defineComponent({
           "--fs-chip-background-color"       : colors.value.base,
           "--fs-chip-border-color"           : colors.value.base,
           "--fs-chip-color"                  : colors.value.baseContrast!,
-          "--fs-chip-hover-background-color" : colors.value.base,
-          "--fs-chip-hover-border-color"     : colors.value.base,
+          "--fs-chip-hover-background-color" : colors.value.soft,
+          "--fs-chip-hover-border-color"     : colors.value.soft,
           "--fs-chip-hover-color"            : colors.value.baseContrast!,
           "--fs-chip-active-background-color": colors.value.dark,
           "--fs-chip-active-border-color"    : colors.value.darkContrast!,

package/components/FSIcon.vue

@@ -13,7 +13,7 @@
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { type ColorBase } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, type ColorBaseVariations } from "@dative-gpi/foundation-shared-components/models";
 
 import { sizeToVar } from "../utils";
 
@@ -31,7 +31,7 @@ export default defineComponent({
       default: null
     },
     variant: {
-      type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      type: String as PropType<ColorBaseVariations>,
       required: false,
       default: "base"
     }

package/components/FSIconCard.vue

@@ -1,6 +1,7 @@
 <template>
   <FSCard
     :variant="$props.backgroundVariant"
+    :borderColor="$props.backgroundVariant === 'background' ? ColorEnum.Light : null"
     :color="$props.backgroundColor"
     :border="$props.border"
     :height="$props.size"
@@ -10,8 +11,8 @@
       align="center-center"
     >
       <FSIcon
-        :variant="$props.iconVariant"
-        :color="contrastedIconColor"
+        :variant="iconVariant"
+        :color="iconColor"
         :size="actualIconSize"
       >
         {{ $props.icon }}
@@ -23,10 +24,9 @@
 <script lang="ts">
 import { defineComponent, type PropType, computed } from "vue";
 
-import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type ColorBase, type ColorBaseVariations } from "@dative-gpi/foundation-shared-components/models";
 
 import { sizeToVar } from "../utils";
-import { useColors } from "../composables";
 
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
@@ -46,7 +46,7 @@ export default defineComponent({
     backgroundColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
       required: false,
-      default: null
+      default: ColorEnum.Background
     },
     backgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
@@ -60,13 +60,12 @@ export default defineComponent({
     },
     iconColor: {
       type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Light
+      required: false
     },
     iconVariant: {
-      type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      type: String as PropType<ColorBaseVariations | null>,
       required: false,
-      default: "base"
+      default: null
     },
     iconSize: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
@@ -80,14 +79,6 @@ export default defineComponent({
     }
   },
   setup(props){
-    const { getColors } = useColors();
-    
-    const colors = computed(() => {
-      return Array.isArray(props.backgroundColor) 
-        ? getColors(props.backgroundColor[Math.floor(props.backgroundColor.length/2)]) 
-        : getColors(props.backgroundColor)
-    });
-
     const actualIconSize = computed(() => {
       if (props.iconSize){
         return props.iconSize;
@@ -98,22 +89,47 @@ export default defineComponent({
       return "42px";
     });
 
-    const contrastedIconColor = computed(() => {
+    const iconVariant = computed((): ColorBaseVariations | undefined => {
+      if (props.iconVariant) {
+        return props.iconVariant;
+      }
+      if (props.iconColor) {
+        return "base";
+      }
+
       switch (props.backgroundVariant) {
+        case "background":
+          return "lightContrast";
         case "standard":
-          switch (props.iconColor) {
-            case ColorEnum.Dark :
-            case ColorEnum.Light:
-            default: return colors.value.lightContrast!
-          };
-        case "background": return colors.value.base
-        default: return colors.value.baseContrast!
+          return "lightContrast";
+        case "full":
+          return "baseContrast";
+        case "gradient":
+          return "baseContrast";
+        default:
+          return "base";
+      }
+    });
+
+    const iconColor = computed((): ColorBase | undefined => {
+      if (props.iconColor) {
+        return props.iconColor;
+      }
+      
+      if(Array.isArray(props.backgroundColor)) {
+        return props.backgroundColor[Math.floor(props.backgroundColor.length/2)];
+      }
+      if(props.backgroundVariant === "background") {
+        return ColorEnum.Light;
       }
+      return props.backgroundColor;
     });
 
     return {
-      contrastedIconColor,
-      actualIconSize
+      actualIconSize,
+      iconVariant,
+      ColorEnum,
+      iconColor,
     };
   }
 });

package/components/FSInformationsMenu.vue

@@ -15,7 +15,7 @@
       >
         <FSButton
           v-bind="props"
-          :color="lightColors.dark"
+          :color="$props.iconColor"
           :iconSize="$props.iconSize"
           variant="icon"
           icon="mdi-information-outline"
@@ -26,6 +26,7 @@
       name="menuContent"
     >
       <FSCard
+        :maxWidth="$props.maxWidth"
         :width="$props.width"
         :padding="$props.padding"
         :elevation="true"
@@ -38,14 +39,15 @@
             align="center-center"
           >
             <FSText
-              font="text-overline"
-              :lineClamp="4"
+              font="text-body"
+              :lineClamp="$props.lineClamp"
             >
               {{ $props.content }}
             </FSText>
           </FSRow>
         </slot>
         <template
+          v-if="$props.showCloseButton"
           #top-right
         >
           <FSButton
@@ -95,7 +97,11 @@ export default defineComponent({
     },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      default: 182
+      default: null
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: null
     },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
@@ -104,6 +110,18 @@ export default defineComponent({
     iconSize: {
       type: String,
       default: "18px"
+    },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      default: ColorEnum.Primary
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: true
+    },
+    lineClamp: {
+      type: Number,
+      default: 4
     }
   },
   emits: ["update:modelValue"],

package/components/map/FSMapMarkerClusterGroup.vue

@@ -58,30 +58,27 @@ export default {
       if (!map.value) {
         return;
       }
-
       const layers = markerClusterGroup.value.getLayers();
+      if (layers.length === props.expectedLayers && !added) {
+        markerClusterGroup.value.addTo(map.value);
+        added = true;
+      }
 
       if (layers.length === 0 && added) {
         map.value.removeLayer(markerClusterGroup.value as unknown as L.Layer);
         added = false;
-        return;
       }
-      if (layers.length === props.expectedLayers && !added) {
-        markerClusterGroup.value.addTo(map.value);
-        added = true;
-      }
-      if (layers.length === props.expectedLayers) {
-        const bounds = new LatLngBounds([]);
-        for (const layer of layers as any[]) {
-          if (layer.getBounds) {
-            bounds.extend(layer.getBounds());
-          } else if (layer.getLatLng) {
-            bounds.extend(layer.getLatLng());
-          }
-        }
 
-        emit("update:bounds", layers.length > 0 ? bounds : null);
+      const bounds = new LatLngBounds([]);
+      for (const layer of layers as any[]) {
+        if (layer.getBounds) {
+          bounds.extend(layer.getBounds());
+        } else if (layer.getLatLng) {
+          bounds.extend(layer.getLatLng());
+        }
       }
+
+      emit("update:bounds", layers.length > 0 ? bounds : null);
     };
 
     markerClusterGroup.value.on("layeradd", handleLayerChange);

package/components/tiles/FSChartTileUI.vue

@@ -1,6 +1,6 @@
 <template>
   <FSTile
-    :width="['324px','272px']"
+    :width="['296px','336px']"
     :height="['132px', '116px']"
     :padding="['16px', '12px']"
     borderRadius="8px"

package/components/tiles/FSSimpleTileUI.vue

@@ -107,13 +107,11 @@ export default defineComponent({
     },
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
-      required: false,
-      default: "standard"
+      required: false
     },
     iconBackgroundColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
-      required: false,
-      default: ColorEnum.Background
+      required: false
     },
     iconBorder: {
       type: Boolean as PropType<boolean>,
@@ -122,8 +120,7 @@ export default defineComponent({
     },
     iconColor: {
       type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Light
+      required: false
     },
     activeColor: {
       type: String as PropType<ColorBase>,

package/models/colors.ts

@@ -19,4 +19,5 @@ export interface ColorVariations {
     darkContrast?: string | null;
 }
 
-export type ColorBase = (string | ColorEnum);
+export type ColorBase = (string | ColorEnum);
+export type ColorBaseVariations = "base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast";

package/package.json

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

package/styles/components/fs_card.scss

@@ -4,6 +4,7 @@
     padding: var(--fs-card-padding);
     height: var(--fs-card-height);
     width: var(--fs-card-width);
+    max-width: var(--fs-card-max-width);
     position: relative;
     display: flex;
     

package/styles/components/fs_chip.scss

@@ -1,3 +1,7 @@
+.fs-chip-container {
+    text-decoration: none;
+}
+
 .fs-chip {
     user-select: none;
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);

package/utils/operations.ts

@@ -1,7 +1,42 @@
 const MinusOperator = "-";
 
-// Matches one of the three operators (+, *, /) or the - operator if it is preceded by something that is not another operator
-const operatorsRegex = new RegExp(/[\+\*\/]|(?<=.)(?<![-\+\*\/])[-]/gm);
+/**
+ * Splits an expression by operators while keeping unary minus signs.
+ */
+const splitByOperators = (expression: string): string[] => {
+  const tokens: string[] = [];
+  let current = '';
+  let expectOperand = true;
+
+  for (let i = 0; i < expression.length; i++) {
+    const char = expression[i];
+    if ('+-*/'.includes(char)) {
+      const isUnaryMinus = char === '-' && expectOperand;
+      if (isUnaryMinus) {
+        current += char;
+        expectOperand = true;
+      } else {
+        if (expectOperand) {
+          // 2 consecutive operators or operator at the start
+          return [];
+        }
+        if (current !== '') {
+          tokens.push(current);
+          current = '';
+        }
+        tokens.push(char);
+        expectOperand = true;
+      }
+    } else {
+      current += char;
+      expectOperand = false;
+    }
+  }
+  if (current !== '') {
+    tokens.push(current);
+  }
+  return tokens;
+};
 
 // Matches a nested block of parenthesis
 const parenthesisRegex = new RegExp(/\([^)(]+\)/gm);
@@ -14,7 +49,11 @@ const validateBlock = (block: string, operands: string[] = [], variables: string
   block = block.replaceAll("(", "").replaceAll(")", "");
 
   // Split block on operators (Leave negative signs)
-  const components = block.split(operatorsRegex);
+  const tokens = splitByOperators(block);
+  if (tokens.length === 0) {
+    return false;
+  }
+  const components = tokens.filter(token => !'+-*/'.includes(token));
 
   // Check if each bit is a valid operand
   for (let i = 0; i < components.length; i++) {