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

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.118",
+  "version": "0.0.120",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.118",
-    "@dative-gpi/foundation-shared-services": "0.0.118",
+    "@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": "76a8d1b854de1eb1d0d914d4c15da28b5306e27f"
+  "gitHead": "faba41cbb99b47b855fbce6d40925eec86611d3d"
 }

package/styles/components/fs_data_table.scss

@@ -1,128 +1,134 @@
 .fs-data-table {
-    table {
-        margin-top: calc(var(--fs-data-table-row-gap) * -1);
-        border-spacing: 0 var(--fs-data-table-row-gap) !important;
-        background-color: var(--fs-data-table-background-color) !important;
-    }
+  & > .v-table__wrapper {
+    padding: 0 1px 0 0;
 
-    .fs-data-table-custom-row > td {
-        border-bottom: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
-        border-top: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
-        background-color: var(--fs-data-table-row-background-color) !important;
-        color: var(--fs-data-table-row-color);
-        position: relative;
-    }
+    @extend .fs-hide-x-scrollbar;
+  }
 
-    .fs-data-table-custom-row > td:first-child{
-        border-top-left-radius: var(--fs-data-table-row-border-radius) !important;
-        border-bottom-left-radius: var(--fs-data-table-row-border-radius) !important;
-        border-left: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
-    }
+  table {
+    margin-top: calc(var(--fs-data-table-row-gap) * -1);
+    border-spacing: 0 var(--fs-data-table-row-gap) !important;
+    background-color: var(--fs-data-table-background-color) !important;
+  }
 
-    .fs-data-table-custom-row > td:last-child{
-        border-top-right-radius: var(--fs-data-table-row-border-radius) !important;
-        border-bottom-right-radius: var(--fs-data-table-row-border-radius) !important;
-        border-right: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
-    }
+  .fs-data-table-custom-row > td {
+    border-bottom: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
+    border-top: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
+    background-color: var(--fs-data-table-row-background-color) !important;
+    color: var(--fs-data-table-row-color);
+    position: relative;
+  }
 
-    th,
-    :not(.fs-data-table-custom-row) > td {
-        background-color: var(--fs-data-table-background-color) !important;
-        position: relative;
-    }
-    
-    th {
-        box-shadow: none !important;
-    
-        &:hover .fs-header-button {
-            opacity: 1;
-        }
-    }
-    
-    th:after {
-        content: "";
-        position: absolute;
-        bottom: 8px;
-        right: 0;
-        height: calc(100% - 16px);
-        border-right: 1px solid var(--fs-data-table-border-color);
-    }
-    
-    td {
-        border-bottom: none !important;
+  .fs-data-table-custom-row > td:first-child{
+    border-top-left-radius: var(--fs-data-table-row-border-radius) !important;
+    border-bottom-left-radius: var(--fs-data-table-row-border-radius) !important;
+    border-left: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
+  }
+
+  .fs-data-table-custom-row > td:last-child{
+    border-top-right-radius: var(--fs-data-table-row-border-radius) !important;
+    border-bottom-right-radius: var(--fs-data-table-row-border-radius) !important;
+    border-right: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
+  }
+
+  th,
+  :not(.fs-data-table-custom-row) > td {
+    background-color: var(--fs-data-table-background-color) !important;
+    position: relative;
+  }
+  
+  th {
+    box-shadow: none !important;
+
+    &:hover .fs-header-button {
+      opacity: 1;
     }
+  }
     
-    th:last-of-type:after,
-    td:last-of-type:after {
-        border-right: none;
-    }
+  th:after {
+    content: "";
+    position: absolute;
+    bottom: 8px;
+    right: 0;
+    height: calc(100% - 16px);
+    border-right: 1px solid var(--fs-data-table-border-color);
+  }
     
-    th:before,
-    td:not(.fs-data-table-group-header):before {
-        content: "";
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        border-bottom: 1px solid var(--fs-data-table-border-color);
-    }
+  td {
+    border-bottom: none !important;
+  }
     
-    th:first-of-type:before,
-    td:first-of-type:before {
-        left: 8px;
-        width: calc(100% - 8px);
-    }
+  th:last-of-type:after,
+  td:last-of-type:after {
+    border-right: none;
+  }
     
-    th:last-of-type:before,
-    td:last-of-type:before {
-        right: 8px;
-        width: calc(100% - 8px);
-    }
+  th:before,
+  td:not(.fs-data-table-group-header):before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    border-bottom: 1px solid var(--fs-data-table-border-color);
+  }
+  
+  th:first-of-type:before,
+  td:first-of-type:before {
+    left: 8px;
+    width: calc(100% - 8px);
+  }
+  
+  th:last-of-type:before,
+  td:last-of-type:before {
+    right: 8px;
+    width: calc(100% - 8px);
+  }
 }
 
 .fs-data-table-grouped {
-    & th:first-of-type {
-        display: none;
-    }
+  & th:first-of-type {
+    display: none;
+  }
 
-    & td:first-of-type {
-        display: none;
-    }
+  & td:first-of-type {
+    display: none;
+  }
 
-    & .fs-data-table-group-header {
-        padding: 0 !important;
+  & .fs-data-table-group-header {
+    padding: 0 !important;
 
-        &:after {
-            content: none !important;
-        }
+    &:after {
+      content: none !important;
     }
+  }
 }
 
 .fs-data-table-iterator {
-    width: 100%;
+  width: 100%;
 }
 
 .fs-data-table-footer {
-    background-color: var(--fs-data-table-background-color);
+  background-color: var(--fs-data-table-background-color);
 }
 
 .fs-data-table-rows-per-page {
-    min-width: 100px;
-    width: 100px;
+  min-width: 100px;
+  width: 100px;
 }
 
 .fs-data-table-pagination {
-    @include web {
-        max-width: 280px;
-    }
+  @include web {
+    max-width: 280px;
+  }
 
-    @include mobile {
-        max-width: 274px;
-    }
+  @include mobile {
+    max-width: 274px;
+  }
 }
 
 .fs-data-table-intersection {
-    margin-top: -8px;
-    height: 10px;
-    width: 100%;
+  margin-top: -8px;
+  height: 10px;
+  width: 100%;
 }