@dative-gpi/foundation-shared-components 0.0.78 → 0.0.80

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/FSDateRangeField.vue

@@ -31,7 +31,7 @@
       <slot :name="name" v-bind="slotData" />
     </template>
   </FSTextField>
-  <FSSubmitDialog
+  <FSDialogSubmit
     :title="$props.label"
     :rightButtonColor="$props.color"
     @click:rightButton="onSubmit"
@@ -43,7 +43,7 @@
         v-model="innerDateRange"
       />
     </template>
-  </FSSubmitDialog>
+  </FSDialogSubmit>
 </template>
 
 <script lang="ts">
@@ -53,7 +53,7 @@ import { useColors, useRules } from "@dative-gpi/foundation-shared-components/co
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSSubmitDialog from "../FSSubmitDialog.vue";
+import FSDialogSubmit from "../FSDialogSubmit.vue";
 import FSCalendarTwin from "../FSCalendarTwin.vue";
 import FSTextField from "./FSTextField.vue";
 import FSButton from "../FSButton.vue";
@@ -61,7 +61,7 @@ import FSButton from "../FSButton.vue";
 export default defineComponent({
   name: "FSDateRangeField",
   components: {
-    FSSubmitDialog,
+    FSDialogSubmit,
     FSCalendarTwin,
     FSTextField,
     FSButton

package/components/fields/FSDateTimeRangeField.vue

@@ -31,7 +31,7 @@
       <slot :name="name" v-bind="slotData" />
     </template>
   </FSTextField>
-  <FSSubmitDialog
+  <FSDialogSubmit
     :title="$props.label"
     :rightButtonColor="$props.color"
     @click:rightButton="onSubmit"
@@ -67,7 +67,7 @@
         </FSRow>
       </FSCol>
     </template>
-  </FSSubmitDialog>
+  </FSDialogSubmit>
 </template>
 
 <script lang="ts">
@@ -77,7 +77,7 @@ import { useColors, useRules } from "@dative-gpi/foundation-shared-components/co
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSSubmitDialog from "../FSSubmitDialog.vue";
+import FSDialogSubmit from "../FSDialogSubmit.vue";
 import FSCalendarTwin from "../FSCalendarTwin.vue";
 import FSTextField from "./FSTextField.vue";
 import FSButton from "../FSButton.vue";
@@ -88,7 +88,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSDateTimeRangeField",
   components: {
-    FSSubmitDialog,
+    FSDialogSubmit,
     FSCalendarTwin,
     FSTextField,
     FSButton,

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.78",
+  "version": "0.0.80",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.78",
-    "@dative-gpi/foundation-shared-services": "0.0.78",
+    "@dative-gpi/foundation-shared-domain": "0.0.80",
+    "@dative-gpi/foundation-shared-services": "0.0.80",
     "@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": "22767f296bdd147691cda96a84fe993c6149fea1"
+  "gitHead": "6418edb464dd47a1384ff22515e5215e43fe6edb"
 }