@dative-gpi/foundation-shared-components 1.0.151 → 1.0.153

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/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/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.151",
+  "version": "1.0.153",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.151",
-    "@dative-gpi/foundation-shared-services": "1.0.151"
+    "@dative-gpi/foundation-shared-domain": "1.0.153",
+    "@dative-gpi/foundation-shared-services": "1.0.153"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "009160ea61bb43f150c0c34cbc09a08804df46b7"
+  "gitHead": "91509afb15dcc9a8baf13c9594c2b5d1da394f7f"
 }

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;