@dative-gpi/foundation-shared-components 1.0.26 → 1.0.28-remove-deprecated2

package/components/fields/FSRichTextField.vue

@@ -29,9 +29,10 @@
           </FSSpan>
         </FSRow>
       </slot>
-      <v-spacer />
-      <template
+      <FSRow
         v-if="$props.editable"
+        align="center-right"
+        :wrap="false"
       >
         <FSIcon
           class="fs-rich-text-field-icon"
@@ -140,7 +141,7 @@
             <FSAutoCompleteField
               itemTitle="label"
               itemValue="code"
-              :placeholder="$tr('ui.rich-text-field.variable-placeholder', 'Choose a variable...')"
+              :placeholder="$tr('rich-text-field.variable-placeholder', 'Choose a variable...')"
               :items="$props.variableReferences"
               @update:modelValue="insertVariable($event)"
             />
@@ -177,16 +178,22 @@
         >
           mdi-format-align-justify
         </FSIcon>
-      </template>
+      </FSRow>
     </FSRow>
+    <FSText
+      v-if="readonly && !$props.modelValue && $props.emptyLabel"
+      variant="soft"
+    >
+      {{ $props.emptyLabel }}
+    </FSText>
     <div
-      class="fs-rich-text-field"
+      :class="classes"
       :style="style"
     >
       <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"
       />
@@ -237,6 +244,7 @@ import FSAutoCompleteField from "./FSAutocompleteField.vue";
 import FSTextField from "./FSTextField.vue";
 import FSIcon from "../FSIcon.vue";
 import FSCard from "../FSCard.vue";
+import FSText from "../FSText.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
@@ -245,6 +253,7 @@ export default defineComponent({
   components: {
     FSAutoCompleteField,
     FSTextField,
+    FSText,
     FSIcon,
     FSCard,
     FSCol,
@@ -261,11 +270,16 @@ export default defineComponent({
       required: false,
       default: null
     },
-    modelValue: {
+    emptyLabel: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
+    modelValue: {
+      type: [Object, String] as PropType<{ [key: string]: any } | string | null>,
+      required: false,
+      default: null
+    },
     linkColor: {
       type: String as PropType<ColorBase>,
       required: false,
@@ -303,13 +317,14 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { isMobileSized } = useBreakpoints();
+    const { fontStyles, isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
 
     const linkColors = computed(() => getColors(props.linkColor));
     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);
@@ -350,6 +365,10 @@ export default defineComponent({
       onError: console.error
     }
 
+    const isEmpty = computed((): boolean => {
+      return editor.getEditorState().isEmpty();
+    });
+
     const editor = createEditor(config);
 
     onMounted((): void => {
@@ -358,16 +377,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 => {
@@ -390,39 +401,53 @@ export default defineComponent({
         case "standard": {
           if (!props.editable) {
             return {
-              "--fs-rich-text-field-undo-cursor": "default",
-              "--fs-rich-text-field-icon-cursor": "default",
-              "--fs-rich-text-field-border-color": lights.base,
-              "--fs-rich-text-field-color": lights.dark,
+              "--fs-rich-text-field-undo-cursor"        : "default",
+              "--fs-rich-text-field-icon-cursor"        : "default",
+              "--fs-rich-text-field-border-color"       : lights.base,
+              "--fs-rich-text-field-color"              : lights.dark,
               "--fs-rich-text-field-active-border-color": lights.base,
-              "--fs-rich-text-field-link-color": linkColors.value.light,
-              "--fs-rich-text-field-min-height": minHeight
+              "--fs-rich-text-field-link-color"         : linkColors.value.light,
+              "--fs-rich-text-field-min-height"         : minHeight,
+              "--fs-rich-text-field-padding"            : isMobileSized.value ? "6px 16px" : "10px 12px",
+              ...fontStyles.value
             };
           }
           else {
             return {
-              "--fs-rich-text-field-undo-cursor": canUndo.value ? "pointer" : "default",
-              "--fs-rich-text-field-icon-cursor": "pointer",
-              "--fs-rich-text-field-border-color": lights.dark,
-              "--fs-rich-text-field-color": darks.base,
-              "--fs-rich-text-field-active-border-color": darks.dark,
-              "--fs-rich-text-field-link-color": linkColors.value.dark,
-              "--fs-rich-text-field-min-height": minHeight,
+              "--fs-rich-text-field-undo-cursor"             : canUndo.value ? "pointer" : "default",
+              "--fs-rich-text-field-icon-cursor"             : "pointer",
+              "--fs-rich-text-field-border-color"            : lights.dark,
+              "--fs-rich-text-field-color"                   : darks.base,
+              "--fs-rich-text-field-active-border-color"     : darks.dark,
+              "--fs-rich-text-field-link-color"              : linkColors.value.dark,
+              "--fs-rich-text-field-min-height"              : minHeight,
               "--fs-rich-text-field-variable-backgroundcolor": getColors(ColorEnum.Primary).light,
-              "--fs-rich-text-field-variable-color": getColors(ColorEnum.Primary).lightContrast!
+              "--fs-rich-text-field-variable-color"          : getColors(ColorEnum.Primary).lightContrast!,
+              "--fs-rich-text-field-padding"                 : isMobileSized.value ? "6px 16px" : "10px 12px",
+              ...fontStyles.value
             };
           }
         }
         case "readonly": return {
-          "--fs-rich-text-field-border-color": "transparent",
-          "--fs-rich-text-field-color": darks.base,
+          "--fs-rich-text-field-border-color"       : "transparent",
+          "--fs-rich-text-field-color"              : darks.base,
           "--fs-rich-text-field-active-border-color": "transparent",
-          "--fs-rich-text-field-link-color": linkColors.value.dark,
-          "--fs-rich-text-field-min-height": minHeight
+          "--fs-rich-text-field-link-color"         : linkColors.value.dark,
+          "--fs-rich-text-field-min-height"         : minHeight,
+          "--fs-rich-text-field-padding"            : "0",
+          ...fontStyles.value
         }
       }
     });
 
+    const classes = computed((): string[] => {
+      const innerClasses = ["fs-rich-text-field"];
+      if (!readonly.value) {
+        innerClasses.push("fs-rich-text-field-readonly");
+      }
+      return innerClasses;
+    });
+
     const toolbarColors = computed((): { [code: string]: string } => {
       if (props.editable) {
         return {
@@ -447,6 +472,10 @@ export default defineComponent({
       }
     });
 
+    const variableValues = computed(() => {
+      return JSON.stringify(props.variableValues)
+    });
+
     const updateToolbar = (): void => {
       const selection = $getSelection();
       isVariable.value = false;
@@ -467,11 +496,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);
         }
       });
     });
@@ -634,29 +668,45 @@ export default defineComponent({
       isLink.value = false;
     }
 
-    watch(() => props.modelValue, () => {
-      if (JSON.stringify(editor.getEditorState().toJSON()) != props.modelValue) {
-        if (props.modelValue != null) {
-          editor.update(() => {
-            editor.setEditorState(editor.parseEditorState(props.modelValue!));
-          });
-        }
-        else if (JSON.stringify(editor.getEditorState().toJSON()) !== emptyLexicalState) {
-          editor.update(() => {
-            editor.setEditorState(editor.parseEditorState(emptyLexicalState));
-          });
-        }
+    const updateEditorState = () => {     
+      if (JSON.stringify(editor.getEditorState().toJSON()) === props.modelValue) {
+        return;
+      }
+      if (props.modelValue != null) {
+        editor.update(() => {
+          if (typeof props.modelValue === "string") {
+            if (props.modelValue !== "") {
+              editor.setEditorState(editor.parseEditorState(props.modelValue!));
+            }
+          }
+          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,
+      ColorEnum,
       readonly,
       linkUrl,
+      classes,
+      loading,
+      isEmpty,
       editor,
       isLink,
       style,

package/components/fields/FSSearchField.vue

@@ -1,13 +1,14 @@
 <template>
   <FSTextField
-    :editable="$props.editable"
+    class="fs-search-field"
     :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
@@ -15,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: {
@@ -76,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 props.placeholder ?? $tr('search-field.placeholder', 'Search...');
     });
 
     return {
       placeholder,
-      buttonLabel,
-      innerValue,
-      ColorEnum,
-      slots,
-      onSearch
     };
   }
 });