@dative-gpi/foundation-shared-components 0.0.119 → 0.0.120

package/components/FSBreadcrumbs.vue

@@ -55,7 +55,7 @@ export default defineComponent({
     const style: Ref<{ [key: string] : string }> = ref({
       "--fs-breadcrumbs-color": darks.dark,
       "--fs-breadcrumbs-active-color": darks.base,
-      "--fs-breadcrumbs-disabled-color": darks.light
+      "--fs-breadcrumbs-disabled-color": darks.soft
     });
 
     const classes = (item: FSBreadcrumbItem): string[] => {

package/components/FSButton.vue

@@ -251,7 +251,7 @@ export default defineComponent({
         case ColorEnum.Success:
         case ColorEnum.Warning:
         case ColorEnum.Error  : return ["standard"].includes(props.variant) ? colors.value.dark : colors.value.light;
-        default               : return ["standard"].includes(props.variant) ? darks.dark : darks.light;
+        default               : return ["standard"].includes(props.variant) ? darks.dark : darks.soft;
       }
     });
 

package/components/FSChip.vue

@@ -122,7 +122,7 @@ export default defineComponent({
         case "full": return {
           "--fs-chip-height"                 : sizeToVar(props.height),
           "--fs-chip-background-color"       : colors.value.base,
-          "--fs-chip-border-color"           : colors.value.baseContrast,
+          "--fs-chip-border-color"           : colors.value.base,
           "--fs-chip-color"                  : colors.value.baseContrast,
           "--fs-chip-hover-background-color" : colors.value.base,
           "--fs-chip-hover-border-color"     : colors.value.base,

package/components/FSClickable.vue

@@ -254,7 +254,7 @@ export default defineComponent({
                 "--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.baseContrast,
+                "--fs-clickable-hover-border-color"     : colors.value.base,
                 "--fs-clickable-hover-color"            : colors.value.baseContrast,
                 "--fs-clickable-active-background-color": colors.value.dark,
                 "--fs-clickable-active-border-color"    : colors.value.darkContrast,
@@ -326,7 +326,7 @@ export default defineComponent({
         case ColorEnum.Success:
         case ColorEnum.Warning:
         case ColorEnum.Error  : return ["full"].includes(props.variant) ? colors.value.light : colors.value.dark;
-        default               : return ["full"].includes(props.variant) ? darks.light : darks.dark;
+        default               : return ["full"].includes(props.variant) ? darks.soft : darks.dark;
       }
     });
 

package/components/FSDialog.vue

@@ -1,8 +1,7 @@
 <template>
   <v-dialog
     transition="dialog-bottom-transition"
-    class="fs-dialog"
-    :style="style"
+    :class="classes"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -10,8 +9,9 @@
     <FSCard
       padding="24px 8px 24px 24px"
       gap="24px"
+      :class="$props.cardClasses"
       :color="$props.color"
-      :class="classes"
+      :width="cardWidth"
     >
       <template
         #header
@@ -113,37 +113,28 @@ export default defineComponent({
     const { isExtraSmall } = useBreakpoints();
 
     const classes = computed((): string[] => {
-      const classNames = ["fs-dialog"];
-      if (props.cardClasses) {
-        if (Array.isArray(props.cardClasses)) {
-          classNames.push(...props.cardClasses);
-        }
-        else {
-          classNames.push(props.cardClasses);
-        }
-      }
+      const classNames: string[] = [];
       if (isExtraSmall.value) {
         classNames.push("fs-dialog-mobile");
       }
+      else {
+        classNames.push("fs-dialog");
+      }
       return classNames;
     });
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const cardWidth = computed((): string => {
       if (isExtraSmall.value) {
-        return {
-          "--fs-dialog-width": "100%"
-        };
+        return "100%";
       }
-      return {
-        "--fs-dialog-width": sizeToVar(props.width)
-      };
+      return sizeToVar(props.width);
     });
 
     return {
       isExtraSmall,
+      cardWidth,
       ColorEnum,
-      classes,
-      style
+      classes
     };
   }
 });

package/components/FSDivider.vue

@@ -19,7 +19,7 @@
       :style="style"
     />
     <FSText
-      variant="light"
+      variant="soft"
       :font="$props.font"
     >
       <slot>

package/components/FSSlideGroup.vue

@@ -91,7 +91,7 @@ export default defineComponent({
     const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-group-padding"     : sizeToVar(props.padding),
       "--fs-group-gap"         : sizeToVar(props.gap),
-      "--fs-group-color"       : darks.light,
+      "--fs-group-color"       : darks.soft,
       "--fs-group-hover-color" : darks.dark
     }));
 

package/components/FSTabs.vue

@@ -50,7 +50,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [key: string] : string | null | undefined } => ({
-      "--fs-group-color"                 : darks.light,
+      "--fs-group-color"                 : darks.soft,
       "--fs-group-hover-color"           : darks.dark,
       "--fs-tab-border-color"            : lights.dark,
       "--fs-tab-hover-border-color"      : darks.dark,

package/components/FSText.vue

@@ -45,7 +45,7 @@ export default defineComponent({
       default: ColorEnum.Dark
     },
     variant: {
-      type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast" | "soft" | "softContrast">,
       required: false,
       default: "base"
     }

package/components/FSWrapGroup.vue

@@ -54,7 +54,7 @@ export default defineComponent({
     const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
-      "--fs-group-color"      : darks.light,
+      "--fs-group-color"      : darks.soft,
       "--fs-group-hover-color": darks.dark
     }));
 

package/components/lists/FSDataTableUI.vue

@@ -1105,7 +1105,7 @@ export default defineComponent({
         switch (property) {
           case "hidden":
             innerColumn.hidden = value as boolean;
-            if (value) {
+            if (value && filters.value[header.value!]) {
               filters.value[header.value!] = filters.value[header.value!].map((filter) => ({ ...filter, hidden: false }));
               resetable.value = Object.keys(filters.value)
                 .some((key) => filters.value[key].some((filter) => filter.hidden));

package/components/tiles/FSDashboardOrganisationTileUI.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSSimpleIconTileUI
+  <FSSimpleTileUI
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
@@ -11,7 +11,7 @@ import { computed, defineComponent, PropType } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardOrganisationTileUI",
@@ -28,7 +28,7 @@ export default defineComponent({
     }
   },
   components: {
-    FSSimpleIconTileUI
+    FSSimpleTileUI
   },
   setup(props){
     const color = computed(() => {

package/components/tiles/FSDashboardOrganisationTypeTileUI.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSSimpleIconTileUI
+  <FSSimpleTileUI
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
@@ -11,7 +11,7 @@ import { computed, defineComponent, PropType } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardOrganisationTypeTileUI",
@@ -28,7 +28,7 @@ export default defineComponent({
     }
   },
   components: {
-    FSSimpleIconTileUI
+    FSSimpleTileUI
   },
   setup(props){
     const color = computed(() => {

package/components/tiles/FSDashboardShallowTileUI.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSSimpleIconTileUI
+  <FSSimpleTileUI
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
@@ -11,7 +11,7 @@ import { computed, defineComponent, PropType } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardShallowTileUI",
@@ -28,7 +28,7 @@ export default defineComponent({
     }
   },
   components: {
-    FSSimpleIconTileUI
+    FSSimpleTileUI
   },
   setup(props){
     const color = computed(() => {

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -30,7 +30,7 @@
             </FSText>
             <FSText
               font="text-overline"
-              variant="light"
+              variant="soft"
             >
               {{ $props.code }}
             </FSText>

package/components/tiles/FSFolderTileUI.vue

@@ -1,8 +1,8 @@
 <template>
-  <FSSimpleIconTileUI
+  <FSSimpleTileUI
+    :iconBackgroundColor="true"
     :bottomColor="color"
     :icon="$props.icon"
-    :iconBackgroundColor="true"
     v-bind="$attrs"
   />
 </template>
@@ -12,7 +12,7 @@ import { computed, defineComponent, PropType } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSFolderTileUI",
@@ -29,7 +29,7 @@ export default defineComponent({
     }
   },
   components: {
-    FSSimpleIconTileUI
+    FSSimpleTileUI
   },
   setup(props){
     const color = computed(() => {

package/components/tiles/FSGroupTileUI.vue

@@ -29,7 +29,7 @@
             </FSText>
             <FSText
               font="text-overline"
-              variant="light"
+              variant="soft"
             >
               {{ $props.code }}
             </FSText>

package/components/tiles/{FSSimpleIconTileUI.vue → FSSimpleTileUI.vue}

@@ -26,12 +26,19 @@
           </FSText>
           <FSText
             font="text-overline"
-            variant="light"
+            variant="soft"
           >
             {{ $props.code }}
           </FSText>
         </FSCol>
+        <FSImage
+          v-if="$props.imageId"
+          :height="imageSize"
+          :width="imageSize"
+          :imageId="$props.imageId"
+        />
         <FSIconCard
+          v-else
           :backgroundColor="iconBackgroundColor"
           :icon="$props.icon"
           :size="imageSize"
@@ -48,17 +55,19 @@ import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composa
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSIconCard from "../FSIconCard.vue";
+import FSImage from "../FSImage.vue";
 import FSText from "../FSText.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
-  name: "FSSimpleIconTileUI",
+  name: "FSSimpleTileUI",
   components: {
     FSIconCard,
-    FSText,
+    FSImage,
     FSTile,
+    FSText,
     FSCol,
     FSRow
   },
@@ -93,6 +102,11 @@ export default defineComponent({
       required: false,
       default: "mdi-ab-testing"
     },
+    imageId: {
+      type: String as PropType<string>,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -31,14 +31,14 @@
           >
             <FSIcon
               v-if="roleIcon"
-              variant="light"
+              variant="soft"
               :color="ColorEnum.Dark"
             >
               {{ roleIcon }}
             </FSIcon>
             <FSText
               font="text-overline"
-              variant="light"
+              variant="soft"
             >
               {{ roleLabel }}
             </FSText>

package/composables/index.ts

@@ -3,4 +3,5 @@ export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";
 export * from "./useRules";
-export * from "./useSlots";
+export * from "./useSlots";
+export * from "./useTables";

package/composables/useColors.ts

@@ -6,7 +6,7 @@ import { ColorBase, ColorEnum, ColorVariations } from "@dative-gpi/foundation-sh
 
 export const useColors = () => {
     const theme = useTheme().current.value;
-    const baseMinSaturation = 55;
+    const baseMinSaturation = 0;
     const baseFixedBrightness = 90;
 
     const isGrayScale = (color: Color): boolean => {
@@ -24,7 +24,8 @@ export const useColors = () => {
 
     const getLight = (base: Color): Color => {
         if (isGrayScale(base)) {
-            return base.value(Math.min(base.value() + 10, 100));
+            return base
+                .value(Math.max(base.value(), 95));
         }
         return base.saturationv(10).value(100);
     };
@@ -33,75 +34,46 @@ export const useColors = () => {
         return base.value(Math.min(base.value() + 10, 100));
     };
 
-    const getBase = (base: Color): Color => {
-        if (isGrayScale(base)) {
-            return base.saturationv(1);
-        }
-        const saturation = base.saturationv() > baseMinSaturation ? base.saturationv() : baseMinSaturation;
-        return base.saturationv(saturation).value(baseFixedBrightness);
-    };
-
     const getDark = (base: Color): Color => {
         return base.value(Math.max(base.value() - 15, 0));
     };
 
-    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));
-            }
+    const getContrast = (color: Color): Color => {
+        if(isGrayScale(color)){
+            const coeff = 4
+            return color
+                .value(color.value() < 70 ? 100 : Math.max(color.value() / coeff, 0));
+        }
+
+        if(isPastel(color)){
+            return color.darken(0.6);
         }
-        return fallback;
+
+        if(color.darken(0.15).isLight()){
+            return color.darken(0.6);
+        }
+        return color.lighten(color.value() / 50);
     }
 
     const getColors = (color: ColorBase): ColorVariations => {
         const themed = (Object as any).values(ColorEnum).includes(color);
 
-        const seed = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
+        const base = 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, dark).hex(),
-                dark: dark.hex(),
-                darkContrast: getContrast(dark, light).hex()
-            };
-        }
-
-        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 {
+            light: light.hex(),
+            lightContrast: getContrast(light).hex(),
+            soft: soft.hex(),
+            softContrast: getContrast(soft).hex(),
+            base: base.hex(),
+            baseContrast: getContrast(base).hex(),
+            dark: dark.hex(),
+            darkContrast: getContrast(dark).hex()
+        };
     };
 
     const getGradients = (colors: ColorBase | ColorBase[], rotation: number = 90): ColorVariations => {
@@ -119,10 +91,10 @@ export const useColors = () => {
     }
 
     const getBasePaletteColors = (): string[][] => {
-        const columnCount = 5
+        const columnCount = 8
         const colors: string[][] = [];
         for (let saturation = baseMinSaturation; saturation <= 100; saturation += (100 - baseMinSaturation) / (columnCount - 1)) {
-            let colorsRow = [];
+            const colorsRow = [];
             for (let hue = 0; hue < 360; hue += 15) {
                 const color = new Color({ h: hue, s: saturation, v: baseFixedBrightness });
                 colorsRow.push(color.hex());
@@ -130,7 +102,7 @@ export const useColors = () => {
             colors.push(colorsRow)
         }
         let i = 0;
-        for (let brightness = 5; brightness <= 95; brightness += (90 / (columnCount - 1))) {
+        for (let brightness = 0; brightness <= 100; brightness += (100 / (columnCount - 1))) {
             const color = new Color({ h: 0, s: 1, v: 100 - brightness });
             colors[i].unshift(color.hex());
             i++;

package/composables/useTables.ts

@@ -0,0 +1,29 @@
+import { ref } from "vue";
+
+import { Single } from "@dative-gpi/foundation-shared-domain/tools/single";
+
+import { FSDataTable } from "../models";
+
+const tables = ref<{ [key: string]: FSDataTable }>({});
+
+const single = new Single();
+
+export const useTables = () => {
+  return single.call(() => {
+    const getTable = (tableCode: string): FSDataTable | null => {
+      if (tables.value[tableCode] != null) {
+        return tables.value[tableCode];
+      }
+      return null;
+    };
+
+    const setTable = (tableCode: string, value: FSDataTable) => {
+      tables.value[tableCode] = { ...value };
+    };
+
+    return {
+      getTable,
+      setTable
+    };
+  });
+};

package/models/tables.ts

@@ -1,33 +1,42 @@
 export interface FSDataTableColumn {
-    [key: string]: any;
-    text?: string | null;
-    value?: string | null;
-    index: number;
-    hidden: boolean;
-    width?: string | number | null;
+  [key: string]: any;
+  text?: string | null;
+  value?: string | null;
+  index: number;
+  hidden: boolean;
+  width?: string | number | null;
 
-    sortable?: boolean | null;
-    sort?: ((a: any, b: any) => number) | null;
+  sortable?: boolean | null;
+  sort?: ((a: any, b: any) => number) | null;
 
-    filterable?: boolean | null;
-    fixedFilters?: { value: any, text: string }[] | null;
-    methodFilter?: ((value: any, item: any) => boolean) | null;
-    filter?: ((value: any, search: string, item: any) => boolean) | null;
+  filterable?: boolean | null;
+  fixedFilters?: { value: any, text: string }[] | null;
+  methodFilter?: ((value: any, item: any) => boolean) | null;
+  filter?: ((value: any, search: string, item: any) => boolean) | null;
 
-    innerValue?: ((value: any) => any) | null;
+  innerValue?: ((value: any) => any) | null;
 
-    // Should not be set directly !
-    slotName?: string | null;
+  // Should not be set directly !
+  slotName?: string | null;
 }
 
 export interface FSDataTableFilter {
-    text: string;
-    value: string;
-    hidden: boolean;
-    filter?: ((value: any, property: any, item: any) => boolean) | null;
+  text: string;
+  value: string;
+  hidden: boolean;
+  filter?: ((value: any, property: any, item: any) => boolean) | null;
 }
 
 export interface FSDataTableOrder {
-    key: string | null;
-    order: "asc" | "desc" | null;
+  key: string | null;
+  order: "asc" | "desc" | null;
+}
+
+export interface FSDataTable {
+  headers: FSDataTableColumn[];
+  sortBy: FSDataTableOrder | null;
+  mode: "table" | "iterator";
+  rowsPerPage: -1 | 10 | 30;
+  filters: { [key: string]: FSDataTableFilter[] };
+  page: number;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.119",
+  "version": "0.0.120",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.119",
-    "@dative-gpi/foundation-shared-services": "0.0.119",
+    "@dative-gpi/foundation-shared-domain": "0.0.120",
+    "@dative-gpi/foundation-shared-services": "0.0.120",
     "@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": "f23ab1e0c8f72006dbf52bb826add56337f4da9b"
+  "gitHead": "faba41cbb99b47b855fbce6d40925eec86611d3d"
 }

package/styles/components/fs_dialog.scss

@@ -1,28 +1,18 @@
-.v-overlay__scrim:has(.v-overlay__content:has(.fs-dialog-mobile)) {
-    display: flex;
-}
-
-.v-overlay__content:has(.fs-dialog-mobile) {
-    justify-content: flex-end;
+.fs-dialog-mobile {
+  & > .v-overlay__content {
+    max-height: calc(100% - 40px) !important;
+    max-width: 100% !important;
+    width: 100% !important;
+    margin: 0 !important;
     align-self: flex-end;
-    margin-top: 40px !important;
-    width: 100vw !important;
-    margin: 0px !important;
-}
-
-.v-overlay__content:has(.fs-dialog) {
-    max-height: calc(100vh - 40px) !important;
-    width: var(--fs-dialog-width) !important;
-    min-width: 35vw !important;
+  }
 }
 
 .fs-dialog {
-    max-height: calc(100vh - 40px) !important;
-    width: var(--fs-dialog-width) !important;
+  & > .v-overlay__content {
+    max-height: calc(100% - 40px) !important;
+    max-width: calc(100% - 40px) !important;
     min-width: 35vw !important;
-}
-
-.fs-dialog-mobile {
-    max-height: calc(100vh - 40px) !important;
-    width: 100vw !important;
+    width: fit-content !important;
+  }
 }