@dative-gpi/foundation-shared-components 0.0.37 → 0.0.39

package/components/FSAccordionPanel.vue

@@ -26,7 +26,9 @@
     </template>
     <template #text>
       <slot name="content">
-        <FSText>
+        <FSText
+          :lineClamp="$props.lineClampContent"
+        >
           {{ $props.content }}
         </FSText>
       </slot>
@@ -35,10 +37,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSIcon from "./FSIcon.vue";
@@ -80,6 +82,11 @@ export default defineComponent({
       required: false,
       default: "16px"
     },
+    lineClampContent: {
+      type: Number,
+      required: false,
+      default: 5
+    },
     divider: {
       type: Boolean,
       required: false,

package/components/FSButton.vue

@@ -46,7 +46,6 @@
   </FSClickable>
   <FSRow
     v-else
-    align="center-center"
     width="hug"
     :class="iconClasses"
     :style="style"
@@ -74,7 +73,6 @@
         </FSIcon>
         <FSSpan
           v-if="$props.label"
-          font="text-overline"
         >
           {{ $props.label }}
         </FSSpan>
@@ -89,7 +87,6 @@
       </FSIcon>
       <FSSpan
         v-if="$props.label"
-        font="text-overline"
       >
         {{ $props.label }}
       </FSSpan>
@@ -99,7 +96,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import { RouteLocation, useRouter } from "vue-router";
+import { RouteLocation } from "vue-router";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -173,7 +170,6 @@ export default defineComponent({
   setup(props, { emit }) {
     const { getColors } = useColors();
     const { slots } = useSlots();
-    const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
@@ -235,18 +231,6 @@ export default defineComponent({
       return "fit-content";
     });
 
-    const href = computed((): string | null => {
-      if (!props.to || !props.editable || props.load) {
-        return null;
-      }
-      if (typeof props.to === "string") {
-        return props.to;
-      }
-      else {
-        return router.resolve(props.to).href;
-      }
-    });
-
     const onClick = (event: MouseEvent) => {
       if (!props.to && props.editable && !props.load) {
         emit("click", event);

package/components/FSChip.vue

@@ -85,41 +85,34 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { getColors, getContrasts } = useColors();
+    const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
     const backgrounds = getColors(ColorEnum.Background);
 
-    const textColors = computed(() => {
-      switch (props.variant) {
-        case "standard": return colors.value;
-        case "full": return getContrasts(props.color);
-      }
-    });
-
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       switch (props.variant) {
         case "standard": return {
           "--fs-chip-background-color"       : backgrounds.base,
           "--fs-chip-border-color"           : colors.value.base,
-          "--fs-chip-color"                  : textColors.value.base,
+          "--fs-chip-color"                  : colors.value.base,
           "--fs-chip-hover-background-color" : backgrounds.base,
           "--fs-chip-hover-border-color"     : colors.value.base,
-          "--fs-chip-hover-color"            : textColors.value.base,
+          "--fs-chip-hover-color"            : colors.value.base,
           "--fs-chip-active-background-color": backgrounds.base,
           "--fs-chip-active-border-color"    : colors.value.dark,
-          "--fs-chip-active-color"           : textColors.value.dark
+          "--fs-chip-active-color"           : colors.value.dark
         };
         case "full": return {
           "--fs-chip-background-color"       : colors.value.base,
-          "--fs-chip-border-color"           : colors.value.base,
-          "--fs-chip-color"                  : textColors.value.light,
+          "--fs-chip-border-color"           : colors.value.baseContrast,
+          "--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-color"            : textColors.value.light,
+          "--fs-chip-hover-border-color"     : colors.value.baseContrast,
+          "--fs-chip-hover-color"            : colors.value.baseContrast,
           "--fs-chip-active-background-color": colors.value.dark,
-          "--fs-chip-active-border-color"    : colors.value.dark,
-          "--fs-chip-active-color"           : textColors.value.light
+          "--fs-chip-active-border-color"    : colors.value.darkContrast,
+          "--fs-chip-active-color"           : colors.value.darkContrast
         };
       }
     });

package/components/FSClickable.vue

@@ -116,10 +116,9 @@ export default defineComponent({
   },
   emits: ["click"],
   setup(props, { emit }) {
-    const { getColors, getContrasts } = useColors();
+    const { getColors } = useColors();
     const router = useRouter();
 
-    const textColors = computed(() => getContrasts(props.color));
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -129,7 +128,7 @@ export default defineComponent({
         return {
           "--fs-clickable-border-size"     : props.border ? "1px" : "0",
           "--fs-clickable-border-radius"   : sizeToVar(props.borderRadius),
-          "--fs-clickable-background-color": lights.base,
+          "--fs-clickable-background-color": lights.light,
           "--fs-clickable-border-color"    : lights.dark,
           "--fs-clickable-color"           : lights.dark
         };
@@ -139,27 +138,27 @@ export default defineComponent({
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
           "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
           "--fs-clickable-background-color"       : colors.value.light,
-          "--fs-clickable-border-color"           : colors.value.base,
-          "--fs-clickable-color"                  : textColors.value.base,
+          "--fs-clickable-border-color"           : colors.value.lightContrast,
+          "--fs-clickable-color"                  : colors.value.lightContrast,
           "--fs-clickable-hover-background-color" : colors.value.base,
-          "--fs-clickable-hover-border-color"     : colors.value.base,
-          "--fs-clickable-hover-color"            : textColors.value.light,
+          "--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.dark,
-          "--fs-clickable-active-color"           : textColors.value.light
+          "--fs-clickable-active-border-color"    : colors.value.darkContrast,
+          "--fs-clickable-active-color"           : colors.value.darkContrast
         };
         case "full": return {
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
           "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
           "--fs-clickable-background-color"       : colors.value.base,
           "--fs-clickable-border-color"           : colors.value.base,
-          "--fs-clickable-color"                  : textColors.value.light,
+          "--fs-clickable-color"                  : colors.value.baseContrast,
           "--fs-clickable-hover-background-color" : colors.value.base,
           "--fs-clickable-hover-border-color"     : colors.value.base,
-          "--fs-clickable-hover-color"            : textColors.value.light,
+          "--fs-clickable-hover-color"            : colors.value.baseContrast,
           "--fs-clickable-active-background-color": colors.value.dark,
           "--fs-clickable-active-border-color"    : colors.value.dark,
-          "--fs-clickable-active-color"           : textColors.value.light
+          "--fs-clickable-active-color"           : colors.value.darkContrast
         };
       }
     });

package/components/FSColor.vue

@@ -41,8 +41,8 @@ export default defineComponent({
 
     const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
       "--fs-color-background-color": colors.value.light,
-      "--fs-color-border-color"    : colors.value.base,
-      "--fs-color-color"           : colors.value.base,
+      "--fs-color-border-color"    : colors.value.lightContrast,
+      "--fs-color-color"           : colors.value.lightContrast,
       "--fs-color-light"           : colors.value.light,
       "--fs-color-base"            : colors.value.base,
       "--fs-color-dark"            : colors.value.dark

package/components/FSDivider.vue

@@ -32,7 +32,7 @@
 import { computed, defineComponent, PropType } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSText from "./FSText.vue";
@@ -43,32 +43,52 @@ export default defineComponent({
     FSText
   },
   props: {
-    width: {
-      type: [String, Number],
-      required: false,
-      default: "100%"
-    },
     label: {
       type: String,
       required: false,
       default: null
     },
+    width: {
+      type: [String, Number],
+      required: false,
+      default: "100%"
+    },
     font: {
       type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
       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"
     }
   },
   setup(props) {
     const { getColors } = useColors();
     const { slots } = useSlots();
 
-    const lights = getColors(ColorEnum.Light);
+    const colors = computed(() => getColors(props.color));
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
-      return {
-        "--fs-divider-width": sizeToVar(props.width),
-        "--fs-divider-color": lights.dark
+      switch (props.variant) {
+        case "base": return {
+          "--fs-divider-width": sizeToVar(props.width),
+          "--fs-divider-color": colors.value.base
+        };
+        case "light": return {
+          "--fs-divider-width": sizeToVar(props.width),
+          "--fs-divider-color": colors.value.light
+        };
+        case "dark": return {
+          "--fs-divider-width": sizeToVar(props.width),
+          "--fs-divider-color": colors.value.dark
+        };
       }
     });
 

package/components/FSErrorToast.vue

@@ -0,0 +1,67 @@
+<template>
+  <FSRow
+    padding="18px 0 18px 32px"
+    class="fs-error-toast"
+    align="center-left"
+    :style="style"
+  >
+    <FSIcon>
+      mdi-alert-outline
+    </FSIcon>
+    <FSSpan>
+      {{ $tr(error.code, error.default) }}
+    </FSSpan>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+import { getError, sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSIcon from "./FSIcon.vue";
+import FSSpan from "./FSSpan.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSErrorToast",
+  components: {
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    errorCode: {
+      type: String,
+      required: true
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+
+    const errors = getColors(ColorEnum.Error);
+
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-error-toast-border-radius"   : sizeToVar(props.borderRadius),
+        "--fs-error-toast-background-color": errors.base,
+        "--fs-error-toast-color"           : errors.light
+      };
+    });
+
+    const error = computed((): { code: string, default: string, status: number } => getError(props.errorCode));
+
+    return {
+      error,
+      style
+    };
+  }
+});
+</script>

package/components/FSFadeOut.vue

@@ -66,10 +66,18 @@ export default defineComponent({
         case "number": return sizeToVar(props.padding);
         default: 
           const paddings = props.padding.split(" ");
+          let tempPadding = "0px";
           switch (paddings.length) {
-            case 0 : return "0px";
-            default: return "-" + sizeToVar(paddings[0]);
+            case 0 :
+              break;
+            default:
+              tempPadding = "-" + sizeToVar(paddings[0]);
+              break;
           }
+          if (tempPadding === "0px") {
+            return "-1px";
+          }
+          return tempPadding;
       }
     });
 
@@ -78,12 +86,22 @@ export default defineComponent({
         case "number": return sizeToVar(props.padding);
         default: 
           const paddings = props.padding.split(" ");
+          let tempPadding = "0px";
           switch (paddings.length) {
-            case 0 : return "0px";
+            case 0 :
+              break;
             case 1 :
-            case 2 : return "-" + sizeToVar(paddings[0]);
-            default: return "-" + sizeToVar(paddings[2]);
+            case 2 :
+              tempPadding = "-" + sizeToVar(paddings[0]);
+              break;
+            default:
+              tempPadding = "-" + sizeToVar(paddings[2]);
+              break;
+          }
+          if (tempPadding === "0px") {
+            return "-1px";
           }
+          return tempPadding;
       }
     });