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

package/components/FSButton.vue

@@ -96,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";
@@ -170,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);
@@ -232,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;
       }
     });
 

package/components/FSOptionGroup.vue

@@ -0,0 +1,311 @@
+<template>
+  <FSWrapGroup
+    v-if="['wrap'].includes($props.variant)"
+    class="fs-option-group"
+    :padding="$props.padding"
+    :gap="$props.gap"
+    :style="style"
+  >
+    <template v-if="$props.values.length">
+      <template v-if="!firstChild">
+        <FSOptionItem
+          v-for="(item, index) in $props.values"
+          :prependIcon="item.prependIcon"
+          :appendIcon="item.appendIcon"
+          :editable="$props.editable"
+          :variant="getVariant(item)"
+          :color="getColor(item)"
+          :class="getClass(item)"
+          :label="item.label"
+          :icon="item.icon"
+          :key="index"
+          @click="toggle(item)"
+        />
+      </template>
+      <template v-else>
+        <component
+          v-for="(item, index) in $props.values"
+          :key="index"
+          :is="firstChild"
+          :prependIcon="getFromFirstChild('prependIcon', item)"
+          :appendIcon="getFromFirstChild('appendIcon', item)"
+          :variant="getFromFirstChild('variant', item)"
+          :color="getFromFirstChild('color', item)"
+          :class="getFromFirstChild('class', item)"
+          :label="getFromFirstChild('label', item)"
+          :icon="getFromFirstChild('icon', item)"
+          :editable="$props.editable"
+          @click="toggle(item)"
+        />
+      </template>
+    </template>
+    <slot v-else />
+  </FSWrapGroup>
+  <FSSlideGroup
+    v-else
+    class="fs-option-group"
+    :padding="$props.padding"
+    :gap="$props.gap"
+    :style="style"
+  >
+    <template v-if="$props.values.length">
+      <template v-if="!firstChild">
+        <FSOptionItem
+          v-for="(item, index) in $props.values"
+          :prependIcon="item.prependIcon"
+          :appendIcon="item.appendIcon"
+          :editable="$props.editable"
+          :variant="getVariant(item)"
+          :color="getColor(item)"
+          :class="getClass(item)"
+          :label="item.label"
+          :icon="item.icon"
+          :key="index"
+          @click="toggle(item)"
+        />
+      </template>
+      <template v-else>
+        <component
+          v-for="(item, index) in $props.values"
+          :key="index"
+          :is="firstChild"
+          :prependIcon="getFromFirstChild('prependIcon', item)"
+          :appendIcon="getFromFirstChild('appendIcon', item)"
+          :variant="getFromFirstChild('variant', item)"
+          :color="getFromFirstChild('color', item)"
+          :class="getFromFirstChild('class', item)"
+          :label="getFromFirstChild('label', item)"
+          :icon="getFromFirstChild('icon', item)"
+          :editable="$props.editable"
+          @click="toggle(item)"
+        />
+      </template>
+    </template>
+    <slot v-else />
+  </FSSlideGroup>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+import { FSToggle } from "@dative-gpi/foundation-shared-components/models"; 
+
+import FSOptionItem from "./FSOptionItem.vue";
+import FSSlideGroup from "./FSSlideGroup.vue";
+import FSWrapGroup from "./FSWrapGroup.vue";
+
+export default defineComponent({
+  name: "FSOptionGroup",
+  components: {
+    FSOptionItem,
+    FSSlideGroup,
+    FSWrapGroup
+  },
+  props: {
+    values: {
+      type: Array as PropType<FSToggle[]>,
+      required: false,
+      default: () => []
+    },
+    border: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    },
+    variant: {
+      type: String as PropType<"wrap" | "slide">,
+      required: false,
+      default: "wrap"
+    },
+    optionVariant: {
+      type: String as PropType<"standard" | "full">,
+      required: false,
+      default: "full"
+    },
+    activeVariant: {
+      type: String as PropType<"standard" | "full">,
+      required: false,
+      default: "full"
+    },
+    optionClass: {
+      type: [Array, String] as PropType<string[] | string>,
+      required: false,
+      default: null
+    },
+    activeClass: {
+      type: [Array, String] as PropType<string[] | string>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: [Array, String, Number] as PropType<(string | number)[] | string | number>,
+      required: false,
+      default: false
+    },
+    optionColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Background
+    },
+    activeColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: "3px"
+    },
+    gap: {
+      type: [String, Number],
+      required: false,
+      default: "0"
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { getFirstChild } = useSlots();
+    const { getColors } = useColors();
+
+    const lights = getColors(ColorEnum.Light);
+
+    const firstChild = getFirstChild("item");
+
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      return {
+          "--fs-option-group-border-size"  : props.border ? "1px" : "0",
+          "--fs-option-group-border-radius": sizeToVar(props.borderRadius),
+          "--fs-option-group-border-color" : lights.base
+      };
+    })
+
+    const getFromFirstChild = (prop: string, value: FSToggle): any => {
+      switch (prop) {
+        case "prependIcon":
+          return firstChild.props.prependIcon ?? value.prependIcon;
+        case "label":
+          return firstChild.props.label ?? value.label;
+        case "appendIcon":
+          return firstChild.props.appendIcon ?? value.appendIcon;
+        case "icon":
+          return firstChild.props.icon ?? value.icon;
+        case "variant":
+          return firstChild.props.variant ?? getVariant(value);
+        case "color":
+          return firstChild.props.color ?? getColor(value);
+        default:
+          return firstChild.props[prop];
+      }
+    }
+
+    const getVariant = (value: FSToggle): "standard" | "full" => {
+      if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {
+        return props.activeVariant;
+      }
+      if (!Array.isArray(props.modelValue) && props.modelValue === value.id) {
+        return props.activeVariant;
+      }
+      return props.optionVariant;
+    };
+
+    const getColor = (value: FSToggle): ColorBase => {
+      if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {
+        return props.activeColor;
+      }
+      if (!Array.isArray(props.modelValue) && props.modelValue === value.id) {
+        return props.activeColor;
+      }
+      return props.optionColor;
+    };
+
+    const getClass = (value: FSToggle): string[] | string => {
+      if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {
+        return props.activeClass;
+      }
+      if (!Array.isArray(props.modelValue) && props.modelValue === value.id) {
+        return props.activeClass;
+      }
+      return props.optionClass;
+    };
+
+    const toggle = (value: FSToggle): void => {
+      if (Array.isArray(props.modelValue)) {
+        if (props.multiple) {
+          if (props.modelValue.length && props.modelValue.every(v => v === value.id)) {
+            if (!props.required) {
+              emit("update:modelValue", []);
+              return;
+            }
+          }
+          else if (props.modelValue.some(v => v === value.id)) {
+            emit("update:modelValue", props.modelValue.filter(v => v !== value.id));
+            return;
+          }
+          else {
+            emit("update:modelValue", [...props.modelValue, value.id]);
+            return;
+          }
+        }
+        else {
+          if (props.modelValue.some(v => v === value.id)) {
+            if (!props.required) {
+              emit("update:modelValue", []);
+              return;
+            }
+          }
+          else {
+            emit("update:modelValue", [value.id]);
+            return;
+          }
+        }
+      }
+      else {
+        if (props.modelValue === value.id) {
+          if (!props.required) {
+            emit("update:modelValue", null);
+            return;
+          }
+        }
+        else {
+          emit("update:modelValue", value.id);
+          return;
+        }
+      }
+    };
+
+    return {
+      firstChild,
+      style,
+      getFromFirstChild,
+      getVariant,
+      getColor,
+      getClass,
+      toggle
+    };
+  }
+})
+</script>

package/components/FSOptionItem.vue

@@ -0,0 +1,132 @@
+<template>
+  <FSClickable
+    padding="12px 0"
+    :editable="$props.editable"
+    :height="['32px', '28px']"
+    :variant="$props.variant"
+    :color="$props.color"
+    :load="$props.load"
+    :width="width"
+    @click.stop="onClick"
+    v-bind="$attrs"
+  >
+    <FSRow
+      align="center-center"
+      width="fill"
+      :wrap="false"
+    >
+      <slot name="prepend" v-bind="{ color: $props.color, colors }">
+        <FSIcon
+          v-if="$props.prependIcon || $props.icon"
+          size="l"
+        >
+          {{ $props.prependIcon ?? $props.icon }}
+        </FSIcon>
+      </slot>
+      <slot v-bind="{ color: $props.color, colors }">
+        <FSSpan
+          v-if="$props.label"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </slot>
+      <slot name="append" v-bind="{ color: $props.color, colors }">
+        <FSIcon
+          v-if="$props.appendIcon"
+          size="l"
+        >
+          {{ $props.appendIcon }}
+        </FSIcon>
+      </slot>
+    </FSRow>
+  </FSClickable>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSClickable from "./FSClickable.vue";
+import FSSpan from "./FSSpan.vue";
+import FSIcon from "./FSIcon.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSOptionItem",
+  components: {
+    FSClickable,
+    FSSpan,
+    FSIcon,
+    FSRow
+  },
+  props: {
+    prependIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    label: {
+      type: [String, Function],
+      required: false,
+      default: null
+    },
+    appendIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    variant: {
+      type: String as PropType<"standard" | "full">,
+      required: false,
+      default: "full"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    load: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+
+    const width = computed((): string => {
+      if (props.label) {
+        return "fit-content";
+      }
+      return "72px";
+    });
+
+    const onClick = (event: MouseEvent) => {
+      if (props.editable && !props.load) {
+        emit("click", event);
+      }
+    };
+
+    return {
+      colors,
+      width,
+      onClick
+    };
+  }
+})
+</script>

package/components/FSSlideGroup.vue

@@ -15,6 +15,7 @@
       />
       <FSButtonPreviousIcon
         :color="ColorEnum.Dark"
+        @click="goToPrev"
       />
     </template>
     <template #default>
@@ -28,6 +29,7 @@
     <template #next>
       <FSButtonNextIcon
         :color="ColorEnum.Dark"
+        @click="goToNext"
       />
       <FSButton
         v-if="$props.dash"
@@ -71,7 +73,12 @@ export default defineComponent({
     dash: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
+    },
+    speed: {
+      type: Number,
+      required: false,
+      default: 250
     }
   },
   setup(props) {
@@ -96,6 +103,12 @@ export default defineComponent({
       }
     };
 
+    const goToPrev = () => {
+      if (slideGroupRef.value) {
+        slideGroupRef.value.scrollOffset = Math.max(0, slideGroupRef.value.scrollOffset - props.speed);
+      }
+    };
+
     const goToEnd = () => {
       if (slideGroupRef.value) {
         const contentSize = slideGroupRef.value.$el.children[1].children[0].clientWidth;
@@ -105,12 +118,23 @@ export default defineComponent({
       }
     };
 
+    const goToNext = () => {
+      if (slideGroupRef.value) {
+        const contentSize = slideGroupRef.value.$el.children[1].children[0].clientWidth;
+        const containerSize = slideGroupRef.value.$el.clientWidth;
+        const arrowsOffset = props.dash ? 104 : 64;
+        slideGroupRef.value.scrollOffset = Math.min(contentSize - containerSize + arrowsOffset, slideGroupRef.value.scrollOffset + props.speed);
+      }
+    };
+
     return {
       slideGroupRef,
       ColorEnum,
       style,
       getChildren,
       goToStart,
+      goToPrev,
+      goToNext,
       goToEnd
     };
   }

package/components/FSTabs.vue

@@ -40,23 +40,22 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { getColors, getContrasts } = useColors();
     const { getChildren } = useSlots();
+    const { getColors } = useColors();
 
-    const textColors = computed(() => getContrasts(props.color));
     const colors = computed(() => getColors(props.color));
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
       "--fs-group-color"                 : darks.base,
+      "--fs-group-disabled-color"        : darks.light,
       "--fs-group-hover-background-color": colors.value.light,
       "--fs-group-hover-color"           : darks.dark,
-      "--fs-group-disabled-color"        : darks.light,
       "--fs-group-light"                 : colors.value.light,
       "--fs-group-base"                  : colors.value.base,
       "--fs-group-dark"                  : colors.value.dark,
       "--fs-tab-tag-background-color"    : colors.value.base,
-      "--fs-tab-tag-color"               : textColors.value.light
+      "--fs-tab-tag-color"               : colors.value.baseContrast
     }));
 
     return {

package/components/FSTag.vue

@@ -73,28 +73,27 @@ export default defineComponent({
   },
   emits: ["remove"],
   setup(props) {
-    const { getColors, getContrasts } = useColors();
+    const { getColors } = useColors();
 
-    const textColors = computed(() => getContrasts(props.color));
     const colors = computed(() => getColors(props.color));
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       switch (props.variant) {
         case "standard": return {
           "--fs-tag-background-color"       : colors.value.light,
-          "--fs-tag-color"                  : textColors.value.base,
+          "--fs-tag-color"                  : colors.value.lightContrast,
           "--fs-tag-hover-background-color" : colors.value.base,
-          "--fs-tag-hover-color"            : textColors.value.light,
+          "--fs-tag-hover-color"            : colors.value.baseContrast,
           "--fs-tag-active-background-color": colors.value.dark,
-          "--fs-tag-active-color"           : textColors.value.light
+          "--fs-tag-active-color"           : colors.value.darkContrast
         };
         case "full": return {
           "--fs-tag-background-color"       : colors.value.base,
-          "--fs-tag-color"                  : textColors.value.light,
+          "--fs-tag-color"                  : colors.value.baseContrast,
           "--fs-tag-hover-background-color" : colors.value.base,
-          "--fs-tag-hover-color"            : textColors.value.light,
+          "--fs-tag-hover-color"            : colors.value.baseContrast,
           "--fs-tag-active-background-color": colors.value.dark,
-          "--fs-tag-active-color"           : textColors.value.light
+          "--fs-tag-active-color"           : colors.value.darkContrast
         };
       }
     });

package/components/FSToggleSet.vue

@@ -16,6 +16,7 @@
           :color="getColor(item)"
           :class="getClass(item)"
           :label="item.label"
+          :icon="item.icon"
           :key="index"
           @click="toggle(item)"
         />
@@ -56,6 +57,7 @@
           :color="getColor(item)"
           :class="getClass(item)"
           :label="item.label"
+          :icon="label.icon"
           :key="index"
           @click="toggle(item)"
         />

package/components/FSWrapGroup.vue

@@ -50,26 +50,10 @@ export default defineComponent({
       "--fs-group-hover-color": darks.dark
     }));
 
-    const goToStart = () => {
-      if (wrapGroupRef.value) {
-        wrapGroupRef.value.scrollOffset = 0;
-      }
-    };
-
-    const goToEnd = () => {
-      if (wrapGroupRef.value) {
-        const contentSize = wrapGroupRef.value.$el.children[1].children[0].clientWidth;
-        const containerSize = wrapGroupRef.value.$el.clientWidth;
-        wrapGroupRef.value.scrollOffset = (contentSize - containerSize);
-      }
-    };
-
     return {
       wrapGroupRef,
       style,
-      getChildren,
-      goToStart,
-      goToEnd
+      getChildren
     };
   }
 });

package/components/fields/FSIconField.vue

@@ -123,7 +123,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const {validateOn, blurred, getMessages} = useRules();
+    const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);

package/composables/useColors.ts

@@ -16,59 +16,89 @@ export const useColors = () => {
         return maxDiff < 10;
     };
 
-    const lighten = (base: Color): Color => {
+    const isPastel = (color: Color): boolean => {
+        return color.saturationv() <= 15 && color.value() >= 85;
+    };
+
+    const getLight = (base: Color): Color => {
         if (isGrayScale(base)) {
             return base.value(Math.min(base.value() + 10, 100));
         }
         return base.saturationv(10).value(100);
     };
 
-    const soften = (base: Color): Color => {
+    const getSoft = (base: Color): Color => {
         return base.value(Math.min(base.value() + 10, 100));
     };
 
-    const darken = (base: Color): Color => {
-        return base.value(Math.max(base.value() - 15, 0));
+    const getBase = (base: Color): Color => {
+        if (isGrayScale(base)) {
+            return base.saturationv(1);
+        }
+        return base.saturationv(((base.saturationv() * 30) / 100) + 70).value(90);
     };
 
-    const getColors = (color: ColorBase): ColorVariations => {
-        const themed = (Object as any).values(ColorEnum).includes(color);
-
-        const base = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
-        const light = lighten(base);
-        const soft = soften(base);
-        const dark = darken(base);
-
-        return {
-            light: light.hex(),
-            soft: soft.hex(),
-            base: base.hex(),
-            dark: dark.hex()
-        };
+    const getDark = (base: Color): Color => {
+        return base.value(Math.max(base.value() - 15, 0));
     };
 
-    const getContrasts = (color: ColorBase): ColorVariations => {
+    const getContrast = (color: Color, fallback: Color): Color => {
+        if (isGrayScale(color)) {
+            if (color.value() > 50) {
+                return color.value(Math.max(0, color.value() - 75));
+            }
+            else {
+                return color.value(Math.min(100, color.value() + 75));
+            }
+        }
+        return fallback;
+    }
+
+    const getColors = (color: ColorBase): ColorVariations => {
         const themed = (Object as any).values(ColorEnum).includes(color);
 
-        let base = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
+        const seed = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
+        
+        const base = getBase(seed);
+        const light = getLight(base);
+        const soft = getSoft(base);
+        const dark = getDark(base);
+
+        if (isPastel(seed)) {
+            return {
+                light: getLight(seed).hex(),
+                lightContrast: getContrast(light, dark).hex(),
+                soft: getSoft(seed).hex(),
+                softContrast: getContrast(seed, dark).hex(),
+                base: seed.hex(),
+                baseContrast: getContrast(seed, base).hex(),
+                dark: dark.hex(),
+                darkContrast: getContrast(dark, light).hex()
+            };
+        }
 
-        if (isGrayScale(base)) {
-            switch (color) {
-                case ColorEnum.Light:
-                    return getColors(ColorEnum.Dark);
-                case ColorEnum.Dark:
-                    return getColors(ColorEnum.Light);
-                default:
-                    if (base.value() > 50) {
-                        base = base.value(Math.max(base.value() - 65, 0));
-                    }
-                    else {
-                        base = base.value(Math.min(base.value() + 65, 100));
-                    }
-                    break;
-            }
+        switch (color) {
+            case ColorEnum.Background: return {
+                light: base.hex(),
+                lightContrast: getContrast(base, base).hex(),
+                soft: base.hex(),
+                softContrast: getContrast(base, base).hex(),
+                base: base.hex(),
+                baseContrast: getContrast(base, base).hex(),
+                dark: dark.hex(),
+                darkContrast: getContrast(dark, base).hex()
+            };
+            default: return {
+                light: light.hex(),
+                lightContrast: getContrast(light, dark).hex(),
+                soft: soft.hex(),
+                softContrast: getContrast(soft, light).hex(),
+                base: base.hex(),
+                baseContrast: getContrast(base, light).hex(),
+                dark: dark.hex(),
+                darkContrast: getContrast(dark, light).hex()
+            };
         }
-        return getColors(base.hex());
     };
 
     const getGradients = (colors: ColorBase | ColorBase[]): ColorVariations => {
@@ -87,7 +117,6 @@ export const useColors = () => {
 
     return {
         getColors,
-        getContrasts,
         getGradients
     };
 }

package/composables/useRules.ts

@@ -61,6 +61,9 @@ export const useRules = () => {
         }
       }
     }
+    for (let i = 1; i < messages.length; i++) {
+      messages[i] = messages[i].toLowerCase();
+    }
     return [...new Set(messages)];
   }
 

package/models/colors.ts

@@ -10,9 +10,13 @@ export enum ColorEnum {
 
 export interface ColorVariations {
     light: string;
+    lightContrast?: string;
     soft: string;
+    softContrast?: string;
     base: string;
+    baseContrast?: string;
     dark: string;
+    darkContrast?: string;
 };
 
 export type ColorBase = (String | ColorEnum);

package/models/errors.ts

@@ -0,0 +1,36 @@
+export const Errors = [
+    { code: "errors.missingorganisation", default: "Missing organisation header", status: 400 },
+    { code: "errors.missinglanguage", default: "Missing language header", status: 400 },
+    { code: "errors.invalidchart", default: "Invalid chart configuration", status: 400 },
+    { code: "errors.invalidscenario", default: "Invalid scenario configuration", status: 400 },
+    { code: "errors.passwordtooshort", default: "Password too short", status: 400 },
+    { code: "errors.passwordtoolong", default: "Password too long", status: 400 },
+    { code: "errors.passwordlowercase", default: "Lowercase character required", status: 400 },
+    { code: "errors.passworduppercase", default: "Uppercase character required", status: 400 },
+    { code: "errors.passwordnumber", default: "Number required", status: 400 },
+    { code: "errors.passwordspecial", default: "Special character required", status: 400 },
+    { code: "errors.authenticationfailed", default: "Authentication failed", status: 401 },
+    { code: "errors.noregistereduser", default: "No registered user", status: 401 },
+    { code: "errors.badcredentials", default: "Bad credentials", status: 401 },
+    { code: "errors.unauthorizedorganisation", default: "Unauthorized organisation", status: 403 },
+    { code: "errors.unauthorizedextension", default: "Unauthorized extension", status: 403 },
+    { code: "errors.unauthorizeduser", default: "Unauthorized user", status: 403 },
+    { code: "errors.usernotinorganisation", default: "User not in organisation", status: 403 },
+    { code: "errors.noadminprivilege", default: "No admin privilege", status: 403 },
+    { code: "errors.dashboardLocked", default: "Dashboard locked", status: 403 },
+    { code: "errors.entitynotfound", default: "Entity not found", status: 404 },
+    { code: "errors.imagenotfound", default: "Image not found", status: 404 },
+    { code: "errors.tokennotfound", default: "Token not found", status: 404 },
+    { code: "errors.alreadyregistereduser", default: "Already registered user", status: 409 },
+    { code: "errors.devicealreadyinorganisation", default: "Device already in organisation", status: 409 },
+    { code: "errors.devicealreadywatched", default: "Device already watched", status: 409 },
+    { code: "errors.useralreadyinorganisation", default: "User already in organisation", status: 409 },
+    { code: "errors.emailfailure", default: "Email failure", status: 422 },
+    { code: "errors.requirevalidation", default: "Require validation", status: 422 },
+    { code: "errors.databaseerror", default: "Database error", status: 449 },
+    { code: "errors.graphsettingserror", default: "Microsoft graph settings error", status: 500 },
+    { code: "errors.graphusererror", default: "Microsoft graph user error", status: 500 },
+    { code: "errors.nomappableproperty", default: "No mappable property", status: 500 },
+    { code: "errors.unvalidextensioncookie", default: "Unvalid extension cookie", status: 500 },
+    { code: "errors.unexpectederror", default: "Unexpected error", status: 500 }
+  ];

package/models/index.ts

@@ -3,6 +3,7 @@ export * from "./colors";
 export * from "./deviceAlerts";
 export * from "./deviceConnectivities";
 export * from "./deviceStatuses";
+export * from "./errors";
 export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.38",
-    "@dative-gpi/foundation-shared-services": "0.0.38",
+    "@dative-gpi/foundation-shared-domain": "0.0.39",
+    "@dative-gpi/foundation-shared-services": "0.0.39",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "6dbe0959177629f0285f2eae895690376a6fa0e1"
+  "gitHead": "f4259f72e37e80ea5276d61fa030956976738397"
 }

package/styles/components/fs_color.scss

@@ -1,6 +1,6 @@
 .fs-color {
-    display: flex;
     background-color: var(--fs-color-background-color) !important;
     border-color: var(--fs-color-border-color) !important;
     color: var(--fs-color-color);
+    display: flex;
 }

package/styles/components/fs_container.scss

@@ -1,16 +1,16 @@
 .fs-container {
-    display: flex;
-    padding: var(--fs-container-padding);
     background-color: var(--fs-container-background-color);
+    padding: var(--fs-container-padding);
+    display: flex;
 
     &-border {
-        border-radius: 4px;
         border: 1px solid var(--fs-container-border-color);
+        border-radius: 4px;
     }
 
     &-elevation {
-        margin: 4px;
-        border-radius: 4px;
         box-shadow: 0px 1px 8px 0px #00000029;
+        border-radius: 4px;
+        margin: 4px;
     }
 }

package/styles/components/fs_error_toast.scss

@@ -0,0 +1,5 @@
+.fs-error-toast {
+    border-radius: var(--fs-error-toast-border-radius);
+    background-color: var(--fs-error-toast-background-color);
+    color: var(--fs-error-toast-color);
+}

package/styles/components/fs_option_group.scss

@@ -0,0 +1,7 @@
+.fs-option-group {
+    border-radius: var(--fs-option-group-border-radius) !important;
+    border: var(--fs-option-group-border-size) solid !important;
+    width: fit-content;
+
+    border-color: var(--fs-option-group-border-color) !important;
+}

package/styles/components/index.scss

@@ -19,6 +19,7 @@
 @import "fs_date_field.scss";
 @import "fs_dialog.scss";
 @import "fs_divider.scss";
+@import "fs_error_toast.scss";
 @import "fs_fade_out.scss";
 @import "fs_filter_button.scss";
 @import "fs_form.scss";
@@ -32,6 +33,7 @@
 @import "fs_load_data_table.scss";
 @import "fs_load_tile.scss";
 @import "fs_loader.scss";
+@import "fs_option_group.scss";
 @import "fs_pagination.scss";
 @import "fs_password_field.scss";
 @import "fs_radio.scss";

package/utils/error.ts

@@ -0,0 +1,5 @@
+import { Errors } from "../models/errors";
+
+export const getError = (code: string): { code: string, default: string, status: number } => {
+    return Errors.find(e => e.code === code) || { code: "errors.unexpectederror", default: "Unexpected error", status: 500 };
+};

package/utils/index.ts

@@ -1,6 +1,7 @@
 export * from "./color";
 export * from "./css";
 export * from "./icons";
+export * from "./error";
 export * from "./levenshtein";
 export * from "./lexical";
 export * from "./sort";