@dative-gpi/foundation-shared-components 0.0.52 → 0.0.54

package/components/FSAccordion.vue

@@ -1,10 +1,13 @@
 <template>
-  <v-expansion-panels variant="accordion">
+  <v-expansion-panels
+    variant="accordion"
+  >
     <template
-      v-for="(component, index) in getChildren(undefined)"
-      :key="index"
+      v-for="component in getChildren()"
     >
-      <component :is="component" />
+      <component
+        :is="component"
+      />
     </template>
   </v-expansion-panels>
 </template>

package/components/FSCard.vue

@@ -44,25 +44,25 @@ export default defineComponent({
     FSRow
   },
   props: {
-    padding: {
-      type: [String, Number],
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "0"
+      default: null
     },
-    border: {
-      type: Boolean,
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: true
+      default: null
     },
-    borderRadius: {
-      type: [String, Number],
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "4px"
+      default: "0"
     },
-    elevation: {
-      type: Boolean,
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: false
+      default: "8px"
     },
     variant: {
       type: String as PropType<"background" | "standard">,
@@ -74,20 +74,20 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Background
     },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+    border: {
+      type: Boolean,
       required: false,
-      default: null
+      default: true
     },
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+    borderRadius: {
+      type: [String, Number],
       required: false,
-      default: null
+      default: "4px"
     },
-    gap: {
-      type: [String, Number],
+    elevation: {
+      type: Boolean,
       required: false,
-      default: "8px"
+      default: false
     }
   },
   setup(props) {

package/components/FSClickable.vue

@@ -70,23 +70,23 @@ export default defineComponent({
     FSCard
   },
   props: {
-    to: {
-      type: [String, Object] as PropType<string | RouteLocation>,
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
     },
-    border: {
-      type: Boolean,
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: true
+      default: null
     },
-    borderRadius: {
-      type: [String, Number],
+    to: {
+      type: [String, Object] as PropType<string | RouteLocation>,
       required: false,
-      default: "4px"
+      default: null
     },
     variant: {
-      type: String as PropType<"standard" | "full">,
+      type: String as PropType<"standard" | "background" | "full">,
       required: false,
       default: "standard"
     },
@@ -100,15 +100,15 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+    border: {
+      type: Boolean,
       required: false,
-      default: null
+      default: true
     },
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+    borderRadius: {
+      type: [String, Number],
       required: false,
-      default: null
+      default: "4px"
     },
     load: {
       type: Boolean,
@@ -127,6 +127,7 @@ export default defineComponent({
     const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
@@ -158,6 +159,21 @@ export default defineComponent({
           "--fs-clickable-height"                 : sizeToVar(props.height),
           "--fs-clickable-width"                  : sizeToVar(props.width)
         };
+        case "background": return {
+          "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+          "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+          "--fs-clickable-background-color"       : backgrounds.base,
+          "--fs-clickable-border-color"           : lights.dark,
+          "--fs-clickable-color"                  : darks.base,
+          "--fs-clickable-hover-background-color" : colors.value.base,
+          "--fs-clickable-hover-border-color"     : colors.value.baseContrast,
+          "--fs-clickable-hover-color"            : colors.value.baseContrast,
+          "--fs-clickable-active-background-color": colors.value.dark,
+          "--fs-clickable-active-border-color"    : colors.value.darkContrast,
+          "--fs-clickable-active-color"           : colors.value.darkContrast,
+          "--fs-clickable-height"                 : sizeToVar(props.height),
+          "--fs-clickable-width"                  : sizeToVar(props.width)
+        };
         case "full": return {
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
           "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),

package/components/FSCol.vue

@@ -16,30 +16,30 @@ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 export default defineComponent({
   name: "FSCol",
   props: {
-    width: {
-      type: [String, Number] as PropType<"hug" | "fill" | string | number>,
-      required: false,
-      default: "fill"
-    },
     height: {
-      type: [String, Number] as PropType<"hug" | "fill" | string | number>,
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
       required: false,
       default: "hug"
     },
-    align: {
-      type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
+    width: {
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
       required: false,
-      default: "top-left"
+      default: "fill"
     },
     padding: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "0"
     },
     gap: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "8px"
+    },
+    align: {
+      type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
+      required: false,
+      default: "top-left"
     }
   },
   setup(props) {

package/components/FSDialog.vue

@@ -9,10 +9,10 @@
     <FSCard
       padding="24px"
       gap="24px"
-      :width="width"
-      :class="classes"
-      :color="$props.color"
       :border="!isExtraSmall"
+      :color="$props.color"
+      :class="classes"
+      :width="width"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
         <slot :name="name" v-bind="slotData" />
@@ -20,8 +20,8 @@
     </FSCard>
     <FSButton
       class="fs-dialog-close-button"
-      variant="icon"
       icon="mdi-close"
+      variant="icon"
       :color="ColorEnum.Dark"
       @click="$emit('update:modelValue', false)"
     />
@@ -37,6 +37,7 @@ import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composa
 import FSButton from "./FSButton.vue";
 import FSCard from "./FSCard.vue";
 import FSCol from "./FSCol.vue";
+import { sizeToVar } from "../utils";
 
 export default defineComponent({
   name: "FSDialog",
@@ -46,25 +47,25 @@ export default defineComponent({
     FSCol
   },
   props: {
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "auto"
+    },
+    cardClasses: {
+      type: [Array, String] as PropType<string[] | string | null>,
+      required: false,
+      default: null
+    },
     modelValue: {
       type: Boolean,
       required: false,
       default: false
     },
-    width: {
-      type: [String, Number],
-      required: false,
-      default: "auto"
-    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Dark
-    },
-    cardClasses: {
-      type: [Array, String] as PropType<string[] | string>,
-      required: false,
-      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -72,24 +73,26 @@ export default defineComponent({
     const { isExtraSmall } = useBreakpoints();
 
     const classes = computed((): string[] => {
-      const innerClasses = ["fs-dialog"];
-      if (Array.isArray(props.cardClasses)) {
-        innerClasses.push(...props.cardClasses);
-      }
-      else {
-        innerClasses.push(props.cardClasses);
+      const classNames = ["fs-dialog"];
+      if (props.cardClasses) {
+        if (Array.isArray(props.cardClasses)) {
+          classNames.push(...props.cardClasses);
+        }
+        else {
+          classNames.push(props.cardClasses);
+        }
       }
       if (isExtraSmall.value) {
-        innerClasses.push("fs-dialog-mobile");
+        classNames.push("fs-dialog-mobile");
       }
-      return innerClasses;
+      return classNames;
     });
 
-    const width = computed((): string | number => {
+    const width = computed((): string => {
       if (isExtraSmall.value) {
         return "100%";
       }
-      return props.width;
+      return sizeToVar(props.width);
     });
 
     return {

package/components/FSDivider.vue

@@ -49,7 +49,7 @@ export default defineComponent({
       default: null
     },
     width: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "100%"
     },
@@ -58,15 +58,15 @@ export default defineComponent({
       required: false,
       default: "text-body"
     },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Light
-    },
     variant: {
       type: String as PropType<"base" | "light" | "dark">,
       required: false,
       default: "dark"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
     }
   },
   setup(props) {
@@ -99,7 +99,7 @@ export default defineComponent({
     return {
       style,
       isEmpty
-    }
+    };
   }
 });
 </script>

package/components/FSEditImage.vue

@@ -62,18 +62,23 @@ export default defineComponent({
     FSText
   },
   props: {
-    padding: {
-      type: [String, Number],
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "8px"
+      default: null
     },
     width: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
     },
-    height: {
-      type: [String, Number],
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -86,11 +91,6 @@ export default defineComponent({
       type: [String, Number],
       required: false,
       default: "4px"
-    },
-    modelValue: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
     }
   },
   emits: ["update:modelValue"],

package/components/FSFadeOut.vue

@@ -22,21 +22,21 @@ export default defineComponent({
   name: "FSFadeOut",
   props: {
     height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: true
     },
     width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "100%"
     },
     padding: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "0"
     },
     maskHeight: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "64px"
     }
@@ -59,56 +59,10 @@ export default defineComponent({
         "--fs-fade-out-padding"            : sizeToVar(props.padding),
         "--fs-fade-out-mask-color"         : backgrounds.base,
         "--fs-fade-out-top-mask-height"    : topMaskHeight.value,
-        "--fs-fade-out-top-mask-top"       : topPadding.value,
         "--fs-fade-out-bottom-mask-height" : bottomMaskHeight.value,
-        "--fs-fade-out-bottom-mask-bottom" : bottomPadding.value
       };
     });
 
-    const topPadding = computed((): string => {
-      switch (typeof props.padding) {
-        case "number": return sizeToVar(props.padding);
-        default: 
-          const paddings = props.padding.split(" ");
-          let tempPadding = "0px";
-          switch (paddings.length) {
-            case 0 :
-              break;
-            default:
-              tempPadding = "-" + sizeToVar(paddings[0]);
-              break;
-          }
-          if (tempPadding === "0px") {
-            return "-1px";
-          }
-          return tempPadding;
-      }
-    });
-
-    const bottomPadding = computed((): string => {
-      switch (typeof props.padding) {
-        case "number": return sizeToVar(props.padding);
-        default: 
-          const paddings = props.padding.split(" ");
-          let tempPadding = "0px";
-          switch (paddings.length) {
-            case 0 :
-              break;
-            case 1 :
-            case 2 :
-              tempPadding = "-" + sizeToVar(paddings[0]);
-              break;
-            default:
-              tempPadding = "-" + sizeToVar(paddings[2]);
-              break;
-          }
-          if (tempPadding === "0px") {
-            return "-1px";
-          }
-          return tempPadding;
-      }
-    });
-
     const onScroll = ({ target }): void => debounce(() => {
       const currentTopMaskHeight = target.children[0].clientHeight;
       const currentBottomMaskHeight = target.children[target.children.length - 1].clientHeight;
@@ -135,15 +89,15 @@ export default defineComponent({
 
     const onResize = (): void => debounce(() => {
       if (fadeOutRef.value) {
-        const currentTopMaskHeight = fadeOutRef.value.children[0].clientHeight;
-        const currentBottomMaskHeight = fadeOutRef.value.children[fadeOutRef.value.children.length - 1].clientHeight;
-        const contentHeight = fadeOutRef.value.scrollHeight - currentTopMaskHeight - currentBottomMaskHeight;
+        const currentTopMaskHeight = (fadeOutRef.value as any).children[0].clientHeight;
+        const currentBottomMaskHeight = (fadeOutRef.value as any).children[(fadeOutRef.value as any).children.length - 1].clientHeight;
+        const contentHeight = (fadeOutRef.value as any).scrollHeight - currentTopMaskHeight - currentBottomMaskHeight;
 
-        if (fadeOutRef.value.clientHeight < contentHeight) {
-          if (fadeOutRef.value.scrollHeight - fadeOutRef.value.scrollTop - fadeOutRef.value.clientHeight > 0) {
+        if ((fadeOutRef.value as any).clientHeight < contentHeight) {
+          if ((fadeOutRef.value as any).scrollHeight - (fadeOutRef.value as any).scrollTop - (fadeOutRef.value as any).clientHeight > 0) {
             bottomMaskHeight.value = sizeToVar(props.maskHeight);
           }
-          if (fadeOutRef.value.scrollTop > 0) {
+          if ((fadeOutRef.value as any).scrollTop > 0) {
             topMaskHeight.value = sizeToVar(props.maskHeight);
           }
         }
@@ -156,7 +110,7 @@ export default defineComponent({
 
     onMounted((): void => {
       if (fadeOutRef.value) {
-        if (fadeOutRef.value.clientHeight < fadeOutRef.value.scrollHeight) {
+        if ((fadeOutRef.value as any).clientHeight < (fadeOutRef.value as any).scrollHeight) {
           bottomMaskHeight.value = sizeToVar(props.maskHeight);
         }
       }

package/components/FSImage.vue

@@ -39,7 +39,7 @@ import { decode, isBlurhashValid } from "blurhash";
 
 import { useImageBlurHash } from "@dative-gpi/foundation-shared-services/composables";
 import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config/urls";
-import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+import { sizeToVar, varToSize } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSLoader from "./FSLoader.vue";
 
@@ -49,28 +49,23 @@ export default defineComponent({
     FSLoader
   },
   props: {
-    imageId: {
-      type: String as PropType<string | null>,
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
     },
-    imageB64: {
-      type: String as PropType<string | null>,
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
     },
-    cover: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    width: {
-      type: [String, Number],
+    imageId: {
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    height: {
-      type: [String, Number],
+    imageB64: {
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -83,10 +78,15 @@ export default defineComponent({
       type: [String, Number],
       required: false,
       default: "4px"
+    },
+    cover: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup(props) {
-    const { get: fetchBlurHash, entity: blurHash } = useImageBlurHash();
+    const { fetch: fetchBlurHash, entity: blurHash } = useImageBlurHash();
 
     const imageRef = ref<HTMLFormElement | null>(null);
     const canvasRef = ref<HTMLCanvasElement | null>(null);
@@ -106,9 +106,9 @@ export default defineComponent({
       }
     });
 
-    const computedHeight = computed((): number | string | undefined => {
+    const computedHeight = computed((): string | undefined => {
       if (props.height) {
-        return props.height;
+        return sizeToVar(props.height);
       }
       if (props.width) {
         if (typeof (props.width) === "string") {
@@ -117,17 +117,17 @@ export default defineComponent({
         if (props.aspectRatio) {
           const split = props.aspectRatio.split('/');
           if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
-            return props.width * (parseFloat(split[1]) / parseFloat(split[0]));
+            return sizeToVar(varToSize(props.width) * (parseFloat(split[1]) / parseFloat(split[0])));
           }
         }
-        return props.width;
+        return sizeToVar(props.width);
       }
       return undefined;
     });
 
-    const computedWidth = computed((): number | string | undefined => {
+    const computedWidth = computed((): string | undefined => {
       if (props.width) {
-        return props.width;
+        return sizeToVar(props.width);
       }
       if (props.height) {
         if (typeof (props.height) === "string") {
@@ -136,10 +136,10 @@ export default defineComponent({
         if (props.aspectRatio) {
           const split = props.aspectRatio.split('/');
           if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
-            return props.height * (parseFloat(split[0]) / parseFloat(split[1]));
+            return sizeToVar(varToSize(props.height) * (parseFloat(split[0]) / parseFloat(split[1])));
           }
         }
-        return props.height;
+        return sizeToVar(props.height);
       }
       return undefined;
     });

package/components/FSLoader.vue

@@ -16,30 +16,30 @@ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 export default defineComponent({
   name: "FSLoader",
   props: {
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
     },
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
     },
     padding: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "0"
     },
-    borderRadius: {
-      type: [String, Number],
-      required: false,
-      default: "4px"
-    },
     variant: {
       type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
       required: false,
       default: "standard"
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
     }
   },
   setup(props) {

package/components/FSOptionGroup.vue

@@ -161,12 +161,12 @@ export default defineComponent({
       default: ColorEnum.Primary
     },
     padding: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "3px"
     },
     gap: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "0"
     },