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

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
     };
   }
 });