@dative-gpi/foundation-shared-components 1.0.87 → 1.0.89

package/components/FSFadeOut.vue

@@ -51,6 +51,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    hideHorizontalOverflow: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     disableTopMask: {
       type: Boolean,
       required: false,
@@ -84,11 +89,13 @@ export default defineComponent({
       "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : undefined,
       "--fs-fade-out-width"             : sizeToVar(props.width),
       "--fs-fade-out-padding"           : sizeToVar(props.padding),
-      "--fs-fade-out-width-offset"       : props.scrollOutside ? '12px' : '0px',
+      "--fs-fade-out-width-offset"      : props.scrollOutside ? '12px' : '0px',
       "--fs-fade-out-padding-offset"    : props.scrollOutside ? '4px' : '0px',
+      "--fs-fade-out-margin-right"      : props.scrollOutside ? '-12px' : '0px',
       "--fs-fade-out-mask-color"        : backgrounds.base,
       "--fs-fade-out-top-mask-height"   : props.disableTopMask ? '0px' : topMaskHeight.value,
-      "--fs-fade-out-bottom-mask-height": props.disableBottomMask ? '0px' : bottomMaskHeight.value
+      "--fs-fade-out-bottom-mask-height": props.disableBottomMask ? '0px' : bottomMaskHeight.value,
+      "--fs-fade-out-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto'
     }));
 
     const handleMasks = () => {

package/components/FSLoader.vue

@@ -32,7 +32,7 @@ export default defineComponent({
       default: "0"
     },
     variant: {
-      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
+      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "standard"
     },
@@ -51,7 +51,7 @@ export default defineComponent({
     const style = computed((): StyleValue => ({
       "--fs-loader-background-color": backgrounds.base,
       "--fs-loader-border-radius"   : ["chip"].includes(props.variant) ? "50px" : sizeToVar(props.borderRadius),
-      "--fs-loader-padding"         : sizeToVar(props.padding),
+      "--fs-loader-padding"         : sizeToVar(getPadding.value),
       "--fs-loader-height"          : sizeToVar(getHeight.value),
       "--fs-loader-width"           : sizeToVar(getWidth.value)
     }));
@@ -63,17 +63,20 @@ export default defineComponent({
         case "input"         :
         case "field"         : return isMobileSized.value ? "36px" : "40px";
         case "chip"          : return isMobileSized.value ? "20px" : "24px";
-        case "text-h1"       : return isMobileSized.value ? "32px" : "40px";
-        case "text-h2"       : return isMobileSized.value ? "24px" : "32px";
-        case "text-h3"       : return isMobileSized.value ? "20px" : "24px";
-        case "text-h4"       : return isMobileSized.value ? "16px" : "20px";
+
+        case "text-h1"       : return isMobileSized.value ? "28px" : "36px";
+        case "text-h2"       : return isMobileSized.value ? "22px" : "26px";
+        case "text-h3"       : return isMobileSized.value ? "16px" : "20px";
         case "text-body"     :
-        case "text-button"   : return isMobileSized.value ? "14px" : "16px";
-        case "text-overline" : return "16px";
+        case "text-button"   : return isMobileSized.value ? "12px" : "14px";
+        case "text-overline" : return isMobileSized.value ? "10px" : "12px";
       }
     });
 
     const getWidth = computed((): string | number => {
+      if (props.width != null) {
+        return sizeToVar(props.width);
+      }
       switch (props.variant) {
         case "standard": return sizeToVar(props.width);
         case "button"  : return isMobileSized.value ? "36px" : "40px";
@@ -87,6 +90,21 @@ export default defineComponent({
       }
     });
 
+    const getPadding = computed((): string | number => {
+      if (props.padding !== "0") {
+        return sizeToVar(props.padding);
+      }
+      switch (props.variant) {
+        case "text-h1"       : return "2px 0";
+        case "text-h2"       : return isMobileSized.value ? "1px 0" : "3px 0";
+        case "text-h3"       : return "2px 0";
+        case "text-body"     :
+        case "text-button"   : return isMobileSized.value ? "2px 0" : "3px 0";;
+        case "text-overline" : return isMobileSized.value ? "3px 0" : "2px 0";
+        default              : return sizeToVar(props.padding);
+      }
+    });
+
     return {
       style
     };

package/components/FSWindow.vue

@@ -1,8 +1,11 @@
 <template>
   <v-window
+    ref="windowRoot"
     class="fs-window"
-    :style="style"
     :touch="false"
+    :style="style"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
     <template
@@ -28,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue, type VNode } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, type VNode, watch } from "vue";
 
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
@@ -45,23 +48,43 @@ export default defineComponent({
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
+    },
+    modelValue: {
+      type: [String, Number, Object] as PropType<any>,
+      required: false,
+      default: 0
     }
   },
+  emits: ["update:modelValue"],
   setup(props) {
     const { slots, getChildren } = useSlots();
 
     delete slots.default;
 
+    const windowRoot = ref<HTMLElement | null>(null);
+
     const style = computed((): StyleValue => ({
-      "--fs-window-width": sizeToVar(props.width),
-      "--fs-window-height": sizeToVar(props.height)
+      "--fs-window-width"   : sizeToVar(props.width),
+      "--fs-window-height"  : sizeToVar(props.height)
     }));
 
     const value = (component: VNode, index: number): any => {
       return component?.props?.value ?? index;
     };
 
+    // Hide horizontal overflow when switching windows, otherwise let it visible for the FSFadeOut scrollbar
+    watch(() => props.modelValue, (): void => {
+      if (windowRoot.value == null) {
+        return;
+      }
+      (windowRoot.value as any).$el.style.setProperty("overflow", "hidden", "important");
+      setTimeout(() => {
+        (windowRoot.value as any).$el.style.setProperty("overflow", "visible", "important");
+      }, 1120);
+    });
+
     return {
+      windowRoot,
       slots,
       style,
       getChildren,

package/components/calendar/FSSimpleCalendar.vue

@@ -13,7 +13,7 @@
         }"
         align="center-center"
       >
-        {{ day(i - 1) }}
+        {{ dayLabel(i - 1) }}
       </FSCol>
     </FSRow>
     <FSRow>
@@ -40,7 +40,7 @@
 import { startOfWeek, endOfWeek, endOfMonth, isSameDay, isBefore, isAfter, isSameMonth, addDays } from "date-fns";
 import { defineComponent, computed } from "vue";
 
-import { useTranslations } from "@dative-gpi/bones-ui";
+import { dayLabel } from "../../tools";
 
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
@@ -68,24 +68,9 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { $tr } = useTranslations();
 
     const { getMachineOffset } = useAppTimeZone();
 
-    const day = (i: number) => {
-      switch(i)
-      {
-        case 0 : return $tr("ui.common.monday", "Monday");
-        case 1 : return $tr("ui.common.tuesday", "Tuesday");
-        case 2 : return $tr("ui.common.wednesday", "Wednesday");
-        case 3 : return $tr("ui.common.thursday", "Thursday");
-        case 4 : return $tr("ui.common.friday", "Friday");
-        case 5 : return $tr("ui.common.saturday", "Saturday");
-        case 6 : return $tr("ui.common.sunday", "Sunday");
-        default: return "";
-      }
-    };
-
     const firstDayOfMonth = computed(() => {
       const date = new Date(props.year, props.month - 1, 1);
       const offset = getMachineOffset();
@@ -155,7 +140,7 @@ export default defineComponent({
     });
 
     return {
-      day,
+      dayLabel,
       days
     };
     

package/components/fields/FSRichTextField.vue

@@ -191,8 +191,8 @@
     >
       <div
         class="fs-rich-text-field-content"
-        :data-variable-values="JSON.stringify($props.variableValues)"
-        :contenteditable="!readonly && $props.editable"
+        :data-variable-values="variableValues"
+        :contenteditable="!readonly && $props.editable && !loading"
         :data-readonly="$props.variant === 'readonly'"
         :id="id"
       />
@@ -275,7 +275,7 @@ export default defineComponent({
       default: null
     },
     modelValue: {
-      type: String as PropType<string | null>,
+      type: [Object, String] as PropType<{ [key: string]: any } | string | null>,
       required: false,
       default: null
     },
@@ -323,6 +323,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
+    const loading = ref(true);
     const canUndo = ref(false);
     const isLink = ref(false);
     const isBold = ref(false);
@@ -375,16 +376,8 @@ export default defineComponent({
       registerRichText(editor);
       registerHistory(editor, createEmptyHistoryState(), 250);
 
-      if (props.modelValue != null) {
-        editor.update((): void => {
-          editor.setEditorState(editor.parseEditorState(props.modelValue!));
-        });
-      }
-      else {
-        editor.update((): void => {
-          editor.setEditorState(editor.parseEditorState(emptyLexicalState));
-        });
-      }
+      updateEditorState();
+      loading.value = false;
     });
 
     const readonly = computed((): boolean => {
@@ -478,6 +471,10 @@ export default defineComponent({
       }
     });
 
+    const variableValues = computed(() => {
+      return JSON.stringify(props.variableValues)
+    });
+
     const updateToolbar = (): void => {
       const selection = $getSelection();
       isVariable.value = false;
@@ -498,11 +495,16 @@ export default defineComponent({
     editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
         updateToolbar();
-        if (JSON.stringify(editorState.toJSON()) !== emptyLexicalState) {
-          emit("update:modelValue", JSON.stringify(editorState.toJSON()));
+        if(loading.value) {
+          return;
         }
-        else {
+        const editorModelValue = JSON.stringify(editorState.toJSON());
+        if(editorModelValue === emptyLexicalState) {
           emit("update:modelValue", null);
+          return;
+        }
+        if(editorModelValue !== props.modelValue) {
+          emit("update:modelValue", editorModelValue);
         }
       });
     });
@@ -665,24 +667,34 @@ export default defineComponent({
       isLink.value = false;
     }
 
-    watch(() => props.modelValue, () => {
-      if (JSON.stringify(editor.getEditorState().toJSON()) != props.modelValue) {
-        if (props.modelValue != null) {
-          editor.update(() => {
+    const updateEditorState = () => {     
+      if (JSON.stringify(editor.getEditorState().toJSON()) === props.modelValue) {
+        return;
+      }
+      if (props.modelValue != null) {
+        editor.update(() => {
+          if(typeof props.modelValue === "string") {
             editor.setEditorState(editor.parseEditorState(props.modelValue!));
-          });
-        }
-        else if (JSON.stringify(editor.getEditorState().toJSON()) !== emptyLexicalState) {
-          editor.update(() => {
-            editor.setEditorState(editor.parseEditorState(emptyLexicalState));
-          });
-        }
+          }
+          else {
+            editor.setEditorState(editor.parseEditorState(JSON.stringify(props.modelValue)));
+          }
+        });
+        return;
       }
+      editor.update(() => {
+        editor.setEditorState(editor.parseEditorState(emptyLexicalState));
+      });
+    }
+
+    watch(() => props.modelValue, () => {
+      updateEditorState();
     });
 
     return {
       FORMAT_ELEMENT_COMMAND,
       FORMAT_TEXT_COMMAND,
+      variableValues,
       toolbarColors,
       menuVariable,
       UNDO_COMMAND,
@@ -690,6 +702,7 @@ export default defineComponent({
       readonly,
       linkUrl,
       classes,
+      loading,
       isEmpty,
       editor,
       isLink,

package/components/fields/FSSearchField.vue

@@ -1,14 +1,14 @@
 <template>
   <FSTextField
     class="fs-search-field"
-    :editable="$props.editable"
     :placeholder="placeholder"
-    @keydown.enter="onSearch"
-    v-model="innerValue"
+    :modelValue="$props.modelValue"
+    prependInnerIcon="mdi-magnify"
+    @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
     <template
-      v-for="(_, name) in slots"
+      v-for="(_, name) in $slots"
       v-slot:[name]="slotData"
     >
       <slot
@@ -16,60 +16,20 @@
         v-bind="slotData"
       />
     </template>
-    <template
-      v-if="$props.prependInnerIcon || $slots['prepend-inner']"
-      #prepend-inner
-    >
-      <FSButton
-        v-if="$props.prependInnerIcon"
-        variant="icon"
-        :icon="$props.prependInnerIcon"
-        :editable="$props.editable"
-        :color="ColorEnum.Dark"
-        @click="onSearch"
-      />
-      <slot
-        name="prepend-inner"
-      />
-    </template>
-    <template
-      v-if="$props.variant !== 'instant' || $slots.append"
-      #append
-    >
-      <FSButton
-        v-if="$props.variant !== 'instant'"
-        :prependIcon="$props.buttonPrependIcon"
-        :label="buttonLabel"
-        :appendIcon="$props.buttonAppendIcon"
-        :variant="$props.buttonVariant"
-        :color="$props.buttonColor"
-        :editable="$props.editable"
-        @click="onSearch"
-      />
-      <slot
-        name="append"
-      />
-    </template>
   </FSTextField>
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-
-import { useSlots } from "../../composables";
 
 import FSTextField from "./FSTextField.vue";
-import FSButton from "../FSButton.vue";
 
 export default defineComponent({
   name: "FSSearchField",
   components: {
-    FSTextField,
-    FSButton
+    FSTextField
   },
   props: {
     placeholder: {
@@ -77,89 +37,22 @@ export default defineComponent({
       required: false,
       default: null
     },
-    prependInnerIcon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: "mdi-magnify"
-    },
-    variant: {
-      type: String as PropType<"standard" | "instant">,
-      required: false,
-      default: "instant"
-    },
-    buttonPrependIcon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    buttonLabel: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    buttonAppendIcon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    buttonVariant: {
-      type: String as PropType<"standard" | "full" | "icon">,
-      required: false,
-      default: "standard"
-    },
     modelValue: {
       type: String as PropType<string | null>,
       required: false,
       default: null
-    },
-    buttonColor: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Primary
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {
+  setup(props) {
     const { $tr } = useTranslationsProvider();
-    const { slots } = useSlots();
-
-    delete slots["prepend-inner"];
-    delete slots.append;
-
-    const innerValue = ref(props.modelValue);
 
     const placeholder = computed(() => {
       return props.placeholder ?? $tr('ui.search.placeholder', 'Search...');
     });
 
-    const buttonLabel = computed(() => {
-      return props.buttonLabel ?? $tr('ui.button.search', 'Search');
-    });
-
-    const onSearch = (event: Event) => {
-      event.stopImmediatePropagation();
-      event.preventDefault();
-      emit('update:modelValue', innerValue.value);
-    };
-
-    watch(innerValue, () => {
-      if (["instant"].includes(props.variant)) {
-        emit("update:modelValue", innerValue.value);
-      }
-    });
-
     return {
       placeholder,
-      buttonLabel,
-      innerValue,
-      ColorEnum,
-      slots,
-      onSearch
     };
   }
 });