@dative-gpi/foundation-shared-components 0.0.79 → 0.0.81

package/components/FSCalendarTwin.vue

@@ -1,8 +1,9 @@
 <template>
   <FSCol>
-    <FSRow>
+    <FSRow
+      v-if="$props.label"
+    >
       <FSSpan
-        v-if="$props.label"
         class="fs-calendar-label"
         font="text-overline"
       >

package/components/FSClickable.vue

@@ -9,6 +9,8 @@
     @mouseup="active = false"
   >
     <FSCard
+      :borderRadius="$props.borderRadius"
+      :borderStyle="$props.borderStyle"
       :height="$props.height"
       :width="$props.width"
       :class="classes"
@@ -39,6 +41,8 @@
     @mouseup="active = false"
   >
     <FSCard
+      :borderRadius="$props.borderRadius"
+      :borderStyle="$props.borderStyle"
       :height="$props.height"
       :width="$props.width"
       :class="classes"
@@ -70,6 +74,8 @@
     @mouseup="active = false"
   >
     <FSCard
+      :borderRadius="$props.borderRadius"
+      :borderStyle="$props.borderStyle"
       :height="$props.height"
       :width="$props.width"
       :class="classes"

package/components/FSDialog.vue

@@ -7,7 +7,7 @@
     v-bind="$attrs"
   >
     <FSCard
-      padding="24px"
+      padding="24px 8px 24px 24px"
       width="100%"
       gap="24px"
       :border="!isExtraSmall"

package/components/FSDialogForm.vue

@@ -13,6 +13,7 @@
       >
         <FSCol
           v-if="$props.title"
+          padding="0 16px 0 0"
         >
           <FSSpan
             font="text-h2"
@@ -31,37 +32,51 @@
       #body
     >
       <FSForm
+        :variant="$props.variant"
+        @submit="onSubmit"
         v-model="valid"
       >
         <FSCol
-          gap="32px"
+          gap="24px"
         >
-          <slot
-            name="body"
-          />
-          <FSRow
-            class="fs-dialog-actions"
-            align="top-right"
-            :wrap="false"
+          <FSFadeOut
+            :height="height"
+            padding="0 8px 0 0"
           >
-            <FSButton
-              :prependIcon="$props.leftButtonPrependIcon"
-              :label="cancelButtonLabel"
-              :appendIcon="$props.leftButtonAppendIcon"
-              :variant="$props.leftButtonVariant"
-              :color="$props.leftButtonColor"
-              @click="() => $emit('update:modelValue', false)"
+            <slot
+              name="body"
             />
-            <FSButton
-              type="submit"
-              :prependIcon="$props.rightButtonPrependIcon"
-              :label="submitButtonLabel"
-              :appendIcon="$props.rightButtonAppendIcon"
-              :variant="$props.rightButtonVariant"
-              :color="$props.rightButtonColor"
-              :editable="$props.editable"
-              @click="onSubmit"
+          </FSFadeOut>
+          <FSRow
+            padding="0 16px 0 0"
+          >
+            <slot
+              name="left-footer"
             />
+            <FSRow
+              class="fs-dialog-actions"
+              align="top-right"
+              :wrap="false"
+            >
+              <FSButton
+                :prependIcon="$props.leftButtonPrependIcon"
+                :label="cancelButtonLabel"
+                :appendIcon="$props.leftButtonAppendIcon"
+                :variant="$props.leftButtonVariant"
+                :color="$props.leftButtonColor"
+                @click="() => $emit('update:modelValue', false)"
+              />
+              <FSButton
+                type="submit"
+                :prependIcon="$props.rightButtonPrependIcon"
+                :label="submitButtonLabel"
+                :appendIcon="$props.rightButtonAppendIcon"
+                :variant="$props.rightButtonVariant"
+                :color="$props.rightButtonColor"
+                :load="$props.load"
+                :editable="$props.editable"
+              />
+            </FSRow>
           </FSRow>
         </FSCol>
       </FSForm>
@@ -74,7 +89,10 @@ import { computed, defineComponent, PropType, ref } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
+import FSFadeOut from "./FSFadeOut.vue";
+import FSButton from "./FSButton.vue";
 import FSDialog from "./FSDialog.vue";
 import FSForm from "./FSForm.vue";
 import FSRow from "./FSRow.vue";
@@ -82,6 +100,8 @@ import FSRow from "./FSRow.vue";
 export default defineComponent({
   name: "FSDialogForm",
   components: {
+    FSFadeOut,
+    FSButton,
     FSDialog,
     FSForm,
     FSRow
@@ -102,6 +122,11 @@ export default defineComponent({
       required: false,
       default: "auto"
     },
+    variant: {
+      type: String as PropType<"standard" | "lazy" | "submit">,
+      required: false,
+      default: "submit"
+    },
     modelValue: {
       type: Boolean,
       required: false,
@@ -157,6 +182,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
+    load: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -165,10 +195,20 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "click:rightButton"],
   setup(props, { emit }) {
+    const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
     const valid = ref(false);
 
+    const height = computed(() => {
+      const other = 24 + 24                                                      // Paddings
+                  + (props.title ? isMobileSized.value ? 24 : 32 : 0)            // Title
+                  + (props.subtitle ? isMobileSized.value ? 14 + 8 : 16 + 8 : 0) // Subtitle
+                  + (isMobileSized.value ? 36 : 40)                              // Footer
+                  + 64;                                                          // Debug mask
+      return `calc(90vh - ${other}px)`;
+    });
+
     const cancelButtonLabel = computed(() => {
       return props.leftButtonLabel ?? $tr("ui.button.cancel", "Cancel");
     });
@@ -187,6 +227,7 @@ export default defineComponent({
       cancelButtonLabel,
       submitButtonLabel,
       ColorEnum,
+      height,
       valid,
       onSubmit
     };

package/components/FSDialogSubmit.vue

@@ -13,6 +13,7 @@
       >
         <FSCol
           v-if="$props.title"
+          padding="0 16px 0 0"
         >
           <FSSpan
             font="text-h2"
@@ -30,9 +31,14 @@
     <template
       #body
     >
-      <slot
-        name="body"
-      />
+      <FSFadeOut
+        :height="height"
+        padding="0 8px 0 0"
+      >
+        <slot
+          name="body"
+        />
+      </FSFadeOut>
     </template>
     <template
       #footer
@@ -41,27 +47,33 @@
         name="footer"
       >
         <FSRow
-          class="fs-dialog-actions"
-          align="top-right"
-          :wrap="false"
+          padding="0 16px 0 0"
         >
-          <FSButton
-            :prependIcon="$props.leftButtonPrependIcon"
-            :label="cancelButtonLabel"
-            :appendIcon="$props.leftButtonAppendIcon"
-            :variant="$props.leftButtonVariant"
-            :color="$props.leftButtonColor"
-            @click="() => $emit('update:modelValue', false)"
-          />
-          <FSButton
-            :prependIcon="$props.rightButtonPrependIcon"
-            :label="submitButtonLabel"
-            :appendIcon="$props.rightButtonAppendIcon"
-            :variant="$props.rightButtonVariant"
-            :color="$props.rightButtonColor"
-            :editable="$props.editable"
-            @click="() => $emit('click:rightButton')"
+          <slot
+            name="left-footer"
           />
+          <FSRow
+            align="top-right"
+            :wrap="false"
+          >
+            <FSButton
+              :prependIcon="$props.leftButtonPrependIcon"
+              :label="cancelButtonLabel"
+              :appendIcon="$props.leftButtonAppendIcon"
+              :variant="$props.leftButtonVariant"
+              :color="$props.leftButtonColor"
+              @click="() => $emit('update:modelValue', false)"
+            />
+            <FSButton
+              :prependIcon="$props.rightButtonPrependIcon"
+              :label="submitButtonLabel"
+              :appendIcon="$props.rightButtonAppendIcon"
+              :variant="$props.rightButtonVariant"
+              :color="$props.rightButtonColor"
+              :editable="$props.editable"
+              @click="() => $emit('click:rightButton')"
+            />
+          </FSRow>
         </FSRow>
       </slot>
     </template>
@@ -73,13 +85,18 @@ import { computed, defineComponent, PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
+import FSFadeOut from "./FSFadeOut.vue";
+import FSButton from "./FSButton.vue";
 import FSDialog from "./FSDialog.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSDialogSubmit",
   components: {
+    FSFadeOut,
+    FSButton,
     FSDialog,
     FSRow
   },
@@ -162,8 +179,19 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "click:rightButton"],
   setup(props) {
+    const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
+    const height = computed(() => {
+      const other = 24 + 24                                                      // Paddings
+                  + (props.title ? isMobileSized.value ? 24 : 32 : 0)            // Title
+                  + (props.subtitle ? isMobileSized.value ? 14 + 8 : 16 + 8 : 0) // Subtitle
+                  + (isMobileSized.value ? 36 : 40)                              // Footer
+                  + 64;                                                          // Debug mask
+      console.log(document.documentElement.clientHeight, document.documentElement.clientHeight*0.9 - other);
+      return `calc(90vh - ${other}px)`;
+    });
+
     const cancelButtonLabel = computed(() => {
       return props.leftButtonLabel ?? $tr("ui.button.cancel", "Cancel");
     });
@@ -175,7 +203,8 @@ export default defineComponent({
     return {
       cancelButtonLabel,
       submitButtonLabel,
-      ColorEnum
+      ColorEnum,
+      height
     };
   }
 });

package/components/FSEditImage.vue

@@ -88,7 +88,7 @@ export default defineComponent({
       default: null
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "update:imageId"],
   setup(props, { emit }) {
     const { getColors } = useColors();
     const { readFile } = useFiles();
@@ -120,7 +120,12 @@ export default defineComponent({
     const onRemove = () => {
       fileSelected.value.fileName = "";
       fileSelected.value.fileContent = null;
-      emit("update:modelValue", null);
+      if (props.modelValue) {
+        emit("update:modelValue", null);
+      }
+      else {
+        emit("update:imageId", null);
+      }
     };
 
     return {

package/components/FSForm.vue

@@ -24,7 +24,7 @@ export default defineComponent({
     variant: {
       type: String as PropType<"standard" | "lazy" | "submit">,
       required: false,
-      default: "standard"
+      default: "submit"
     }
   },
   emits: ["update:modelValue", "submit"],

package/components/FSImage.vue

@@ -12,6 +12,7 @@
   >
     <template #placeholder>
       <FSLoader
+        v-if="$props.imageId"
         class="fs-image-load"
         height="100%"
         width="100%"

package/components/fields/FSAutocompleteField.vue

@@ -34,9 +34,9 @@
       </FSRow>
     </slot>
     <v-autocomplete
-      menuIcon="mdi-chevron-down"
-      clearIcon="mdi-close"
+      class="fs-autocomplete-field"
       variant="outlined"
+      :menuIcon="null"
       :style="style"
       :listProps="listStyle"
       :class="classes"
@@ -60,6 +60,27 @@
       <template v-for="(_, name) in slots" v-slot:[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
+      <template #clear>
+        <slot name="clear">
+          <FSButton
+            v-if="$props.editable && $props.modelValue"
+            icon="mdi-close"
+            variant="icon"
+            :color="ColorEnum.Dark"
+            @click="$emit('update:modelValue', null)"
+          />
+        </slot>
+      </template>
+      <template #append-inner>
+        <slot name="append-inner">
+          <FSButton
+            icon="mdi-chevron-down"
+            variant="icon"
+            :editable="$props.editable"
+            :color="ColorEnum.Dark"
+          />
+        </slot>
+      </template>
     </v-autocomplete>
     <slot name="description">
       <FSSpan
@@ -80,6 +101,7 @@ import { computed, defineComponent, PropType, ref, watch } from "vue";
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSButton from "../FSButton.vue";
 import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -87,6 +109,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSAutocompleteField",
   components: {
+    FSButton,
     FSSpan,
     FSCol,
     FSRow
@@ -221,6 +244,7 @@ export default defineComponent({
     return {
       innerSearch,
       validateOn,
+      ColorEnum,
       listStyle,
       messages,
       blurred,

package/components/fields/FSColorField.vue

@@ -1,10 +1,12 @@
-<template> 
+<template>
   <v-menu
     :closeOnContentClick="false"
     :modelValue="menu && $props.editable"
     @update:modelValue="(value) => menu = value"
-  >  
-    <template #activator="{ props }">
+  >
+    <template
+      #activator="{ props }"
+    >
       <FSCol>
         <FSRow
           height="fill"
@@ -20,8 +22,12 @@
             :modelValue="innerColor"
             v-bind="$attrs"
           >
-            <template #prepend-inner>
-              <slot name="prepend-inner">
+            <template
+              #prepend-inner
+            >
+              <slot
+                name="prepend-inner"
+              >
                 <FSIcon
                   :color="innerColor"
                 >
@@ -29,7 +35,9 @@
                 </FSIcon>
               </slot>
             </template>
-            <template #append> 
+            <template
+              #append
+            >
               <FSButton
                 prependIcon="mdi-pencil"
                 variant="full"
@@ -39,7 +47,7 @@
             </template>
           </FSTextField>
           <FSTextField
-            v-if="$props.allowOpacity"
+            v-if="$props.allowOpacity && !$props.onlyBaseColors"
             class="fs-color-field-opacity"
             :label="$tr('ui.color-field.opacity', 'Opacity')"
             :hideHeader="$props.hideHeader"
@@ -47,10 +55,14 @@
             :editable="$props.editable"
             :clearable="false"
             :readonly="true"
-            :modelValue="(Math.round(getPercentageFromHex(innerOpacity)*100)) + ' %'"
+            :modelValue="(Math.round(getPercentageFromHex(innerOpacity) * 100)) + ' %'"
           >
-            <template #prepend-inner>
-              <slot name="prepend-inner">
+            <template
+              #prepend-inner
+            >
+              <slot
+                name="prepend-inner"
+              >
                 <FSIcon
                   :color="ColorEnum.Dark"
                   :editable="$props.editable"
@@ -60,7 +72,9 @@
                 </FSIcon>
               </slot>
             </template>
-            <template #append> 
+            <template
+              #append
+            >
               <FSButton
                 prependIcon="mdi-pencil"
                 variant="full"
@@ -70,7 +84,9 @@
             </template>
           </FSTextField>
         </FSRow>
-        <slot name="description">
+        <slot
+          name="description"
+        >
           <FSSpan
             v-if="$props.description"
             class="fs-color-field-description"
@@ -81,7 +97,7 @@
           </FSSpan>
         </slot>
       </FSCol>
-    </template> 
+    </template>
     <FSCard
       :elevation="true"
       :border="false"
@@ -90,6 +106,7 @@
         width="fill"
       >
         <v-color-picker
+          v-if="!$props.onlyBaseColors"
           class="fs-color-field-picker"
           mode="hexa"
           :elevation="0"
@@ -97,11 +114,24 @@
           :modelValue="fullColor"
           @update:modelValue="onSubmit"
         />
+        <v-color-picker
+          v-else
+          class="fs-color-field-picker"
+          :elevation="0"
+          :modelValue="fullColor"
+          @update:modelValue="onSubmit"
+          swatches-max-height="400px"
+          show-swatches
+          hide-inputs
+          hide-canvas
+          hide-sliders
+          :swatches="getBasePaletteColors()"
+        />
       </FSCol>
     </FSCard>
   </v-menu>
 </template>
-  
+
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
@@ -161,11 +191,16 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    onlyBaseColors: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ["update:modelValue", "update:opacity"],
   setup(props, { emit }) {
-    const { getColors } = useColors();
+    const { getColors, getBasePaletteColors } = useColors();
     const { slots } = useSlots();
 
     delete slots.description;
@@ -178,7 +213,7 @@ export default defineComponent({
     const innerOpacity = ref(getHexFromPercentage(props.opacityValue));
     const fullColor = ref(innerColor.value + innerOpacity.value);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string]: string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-color-field-color": lights.dark
@@ -200,6 +235,7 @@ export default defineComponent({
 
     return {
       getPercentageFromHex,
+      getBasePaletteColors,
       innerOpacity,
       innerColor,
       fullColor,

package/components/fields/FSSelectField.vue

@@ -35,9 +35,8 @@
     </slot>
     <v-select
       class="fs-select-field"
-      menuIcon="mdi-chevron-down"
-      clearIcon="mdi-close"
       variant="outlined"
+      :menuIcon="null"
       :style="style"
       :listProps="listStyle"
       :hideDetails="true"
@@ -57,6 +56,27 @@
       <template v-for="(_, name) in slots" v-slot:[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
+      <template #clear>
+        <slot name="clear">
+          <FSButton
+            v-if="$props.editable && $props.modelValue"
+            icon="mdi-close"
+            variant="icon"
+            :color="ColorEnum.Dark"
+            @click="$emit('update:modelValue', null)"
+          />
+        </slot>
+      </template>
+      <template #append-inner>
+        <slot name="append-inner">
+          <FSButton
+            icon="mdi-chevron-down"
+            variant="icon"
+            :editable="$props.editable"
+            :color="ColorEnum.Dark"
+          />
+        </slot>
+      </template>
     </v-select>
     <slot name="description">
       <FSSpan
@@ -77,6 +97,7 @@ import { computed, defineComponent, PropType } from "vue";
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSButton from "../FSButton.vue";
 import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -84,6 +105,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSSelectField",
   components: {
+    FSButton,
     FSSpan,
     FSCol,
     FSRow
@@ -193,6 +215,7 @@ export default defineComponent({
 
     return {
       validateOn,
+      ColorEnum,
       listStyle,
       messages,
       blurred,

package/components/fields/FSTagField.vue

@@ -15,6 +15,9 @@
       v-model="innerValue"
       v-bind="$attrs"
     >
+      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
       <template #append-inner>
         <slot name="append-inner">
           <FSButton
@@ -26,9 +29,6 @@
           />
         </slot>
       </template>
-      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
     </FSTextField>
     <FSTagGroup
       :tags="$props.modelValue"

package/components/fields/FSTextArea.vue

@@ -34,7 +34,7 @@
       </FSRow>
     </slot>
     <v-textarea
-      clearIcon="mdi-close"
+      class="fs-text-area"
       variant="outlined"
       :style="style"
       :class="classes"
@@ -54,6 +54,15 @@
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
+      <template #clear>
+        <FSButton
+          v-if="$props.editable && $props.modelValue"
+          icon="mdi-close"
+          variant="icon"
+          :color="ColorEnum.Dark"
+          @click="$emit('update:modelValue', null)"
+        />
+      </template>
     </v-textarea>
     <slot name="description">
       <FSSpan
@@ -200,10 +209,11 @@ export default defineComponent({
 
     return {
       validateOn,
+      ColorEnum,
       messages,
       blurred,
+      classes,
       style,
-      classes
     };
   }
 });

package/components/fields/FSTextField.vue

@@ -35,7 +35,6 @@
     </slot>
     <v-text-field
       class="fs-text-field"
-      clearIcon="mdi-close"
       variant="outlined"
       :style="style"
       :type="$props.type"
@@ -52,6 +51,15 @@
       <template v-for="(_, name) in slots" v-slot:[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
+      <template #clear>
+        <FSButton
+          v-if="$props.editable && $props.modelValue"
+          icon="mdi-close"
+          variant="icon"
+          :color="ColorEnum.Dark"
+          @click="$emit('update:modelValue', null)"
+        />
+      </template>
     </v-text-field>
     <slot name="description">
       <FSSpan
@@ -72,6 +80,7 @@ import { computed, defineComponent, PropType } from "vue";
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSButton from "../FSButton.vue";
 import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -79,6 +88,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSTextField",
   components: {
+    FSButton,
     FSSpan,
     FSCol,
     FSRow
@@ -166,6 +176,7 @@ export default defineComponent({
 
     return {
       validateOn,
+      ColorEnum,
       messages,
       blurred,
       slots,

package/components/tiles/FSDashboardOrganisationTileUI.vue

@@ -1,18 +1,46 @@
 <template>
   <FSSimpleIconTileUI
+    :bottomColor="color"
+    :icon="$props.icon"
     v-bind="$attrs"
   />
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { computed, defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardOrganisationTileUI",
+  props: {
+    bottomColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: "mdi-view-dashboard"
+    }
+  },
   components: {
     FSSimpleIconTileUI
+  },
+  setup(props){
+    const color = computed(() => {
+      if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
+        return ColorEnum.Primary;
+      }
+      return props.bottomColor;
+    });
+
+    return {
+      color
+    }
   }
 });
 </script>

package/components/tiles/FSDashboardOrganisationTypeTileUI.vue

@@ -1,18 +1,46 @@
 <template>
   <FSSimpleIconTileUI
+    :bottomColor="color"
+    :icon="$props.icon"
     v-bind="$attrs"
   />
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { computed, defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardOrganisationTypeTileUI",
+  props: {
+    bottomColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: "mdi-view-dashboard"
+    }
+  },
   components: {
     FSSimpleIconTileUI
+  },
+  setup(props){
+    const color = computed(() => {
+      if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
+        return ColorEnum.Primary;
+      }
+      return props.bottomColor;
+    });
+
+    return {
+      color
+    }
   }
 });
 </script>

package/components/tiles/FSDashboardShallowTileUI.vue

@@ -1,18 +1,46 @@
 <template>
   <FSSimpleIconTileUI
+    :bottomColor="color"
+    :icon="$props.icon"
     v-bind="$attrs"
   />
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { computed, defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardShallowTileUI",
+  props: {
+    bottomColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: "mdi-view-dashboard"
+    }
+  },
   components: {
     FSSimpleIconTileUI
+  },
+  setup(props){
+    const color = computed(() => {
+      if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
+        return ColorEnum.Primary;
+      }
+      return props.bottomColor;
+    });
+
+    return {
+      color
+    }
   }
 });
 </script>

package/components/tiles/FSFolderTileUI.vue

@@ -1,19 +1,47 @@
 <template>
   <FSSimpleIconTileUI
+    :bottomColor="color"
+    :icon="$props.icon"
     :iconBackgroundColor="true"
     v-bind="$attrs"
   />
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { computed, defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
 
 export default defineComponent({
   name: "FSFolderTileUI",
+  props: {
+    bottomColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      required: false,
+      default: [ColorEnum.Light, ColorEnum.Primary]
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: "mdi-folder-outline"
+    }
+  },
   components: {
     FSSimpleIconTileUI
+  },
+  setup(props){
+    const color = computed(() => {
+      if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
+        return [ColorEnum.Light, ColorEnum.Primary];
+      }
+      return props.bottomColor;
+    });
+
+    return {
+      color
+    }
   }
 });
 </script>

package/composables/useColors.ts

@@ -6,6 +6,8 @@ import { ColorBase, ColorEnum, ColorVariations } from "@dative-gpi/foundation-sh
 
 export const useColors = () => {
     const theme = useTheme().current.value;
+    const baseMinSaturation = 55;
+    const baseFixedBrightness = 90;
 
     const isGrayScale = (color: Color): boolean => {
         const maxDiff = Math.max(
@@ -35,7 +37,8 @@ export const useColors = () => {
         if (isGrayScale(base)) {
             return base.saturationv(1);
         }
-        return base.saturationv(((base.saturationv() * 30) / 100) + 70).value(90);
+        const saturation = base.saturationv() > baseMinSaturation ? base.saturationv() : baseMinSaturation;
+        return base.saturationv(saturation).value(baseFixedBrightness);
     };
 
     const getDark = (base: Color): Color => {
@@ -58,7 +61,7 @@ export const useColors = () => {
         const themed = (Object as any).values(ColorEnum).includes(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);
@@ -115,8 +118,30 @@ export const useColors = () => {
         };
     }
 
+    const getBasePaletteColors = (): string[][] => {
+        const columnCount = 5
+        const colors: string[][] = [];
+        for (let saturation = baseMinSaturation; saturation <= 100; saturation += (100 - baseMinSaturation) / (columnCount - 1)) {
+            let colorsRow = [];
+            for (let hue = 0; hue < 360; hue += 15) {
+                const color = new Color({ h: hue, s: saturation, v: baseFixedBrightness });
+                colorsRow.push(color.hex());
+            }
+            colors.push(colorsRow)
+        }
+        let i = 0;
+        for (let brightness = 5; brightness <= 95; brightness += (90 / (columnCount - 1))) {
+            const color = new Color({ h: 0, s: 1, v: 100 - brightness });
+            colors[i].unshift(color.hex());
+            i++;
+        }
+        return colors;
+    }
+
+
     return {
         getColors,
-        getGradients
+        getGradients,
+        getBasePaletteColors
     };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.79",
+  "version": "0.0.81",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.79",
-    "@dative-gpi/foundation-shared-services": "0.0.79",
+    "@dative-gpi/foundation-shared-domain": "0.0.81",
+    "@dative-gpi/foundation-shared-services": "0.0.81",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -25,12 +25,12 @@
     "blurhash": "^2.0.5",
     "color": "^4.2.3",
     "lexical": "^0.12.5",
-    "vue": "^3.2.0"
+    "vue": "^3.4.23"
   },
   "devDependencies": {
     "@types/color": "^3.0.6",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "60788de9c98493c3bd2889c2cd92f1a7d0780543"
+  "gitHead": "72578083082db4065616325c62c03918f5a50166"
 }

package/styles/components/fs_dialog.scss

@@ -15,7 +15,7 @@
     position: relative;
     min-width: 35vw !important;
     max-width: 90vw !important;
-    max-height: 90vw !important;
+    max-height: 90vh !important;
 
     &.fs-dialog-mobile {
         border-top-left-radius: 4px;
@@ -28,10 +28,4 @@
     position: absolute;
     top: 6px;
     right: 6px;
-}
-
-.fs-dialog-actions {
-    position: sticky;
-    bottom: 8px;
-    right: 8px;
 }

package/styles/components/fs_fade_out.scss

@@ -2,15 +2,14 @@
     @extend .fs-hide-y-scrollbar;
     
     max-height: var(--fs-fade-out-height);
+
     padding: var(--fs-fade-out-padding);
     width: var(--fs-fade-out-width);
-    padding-bottom: 0 !important;
-    padding-top: 0 !important;
     flex-direction: column;
     position: relative;
     display: flex;
 }
-
+// TODO
 .fs-fade-out-top {
     pointer-events: none;
     position: sticky;

package/styles/components/fs_slider.scss

@@ -4,6 +4,8 @@
 
     & .v-slider__container {
         cursor: var(--fs-slider-cursor);
+        margin-left: 8px;
+        margin-right: 8px;
         opacity: 1 !important;
     }
 

package/styles/globals/overrides.scss

@@ -70,7 +70,6 @@
 
     &:not(.fs-text-area) > .v-input__control > .v-field {
         padding: 0 16px !important;
-        gap: 8px;
 
         & > .v-field__field > .v-field__input {
             @extend .text-body;