@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/fields/FSRichTextField.vue

@@ -179,8 +179,14 @@
         </FSIcon>
       </template>
     </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
@@ -218,7 +224,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { $createParagraphNode, $getSelection, $isElementNode, $isRangeSelection, $isNodeSelection, $setSelection, CAN_UNDO_COMMAND, createEditor, type ElementNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, ParagraphNode, UNDO_COMMAND } from "lexical";
 import { $createHeadingNode, HeadingNode, type HeadingTagType, registerRichText } from "@lexical/rich-text";
@@ -237,6 +243,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 +252,7 @@ export default defineComponent({
   components: {
     FSAutoCompleteField,
     FSTextField,
+    FSText,
     FSIcon,
     FSCard,
     FSCol,
@@ -261,6 +269,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    emptyLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     modelValue: {
       type: String as PropType<string | null>,
       required: false,
@@ -350,6 +363,10 @@ export default defineComponent({
       onError: console.error
     }
 
+    const isEmpty = computed((): boolean => {
+      return editor.getEditorState().isEmpty();
+    });
+
     const editor = createEditor(config);
 
     onMounted((): void => {
@@ -374,7 +391,7 @@ export default defineComponent({
       return ["readonly"].includes(props.variant);
     });
 
-    const style = computed((): { [key: string]: string | null | undefined } => {
+    const style = computed((): StyleValue => {
       let minHeight: string | undefined = "auto";
       if (!readonly.value) {
         const base = isMobileSized.value ? 30 : 42;
@@ -386,7 +403,6 @@ export default defineComponent({
           minHeight = `${base}px`;
         }
       }
-
       switch (props.variant) {
         case "standard": {
           if (!props.editable) {
@@ -410,7 +426,7 @@ export default defineComponent({
               "--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!
             };
           }
         }
@@ -424,6 +440,14 @@ export default defineComponent({
       }
     });
 
+    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 {
@@ -656,8 +680,11 @@ export default defineComponent({
       toolbarColors,
       menuVariable,
       UNDO_COMMAND,
+      ColorEnum,
       readonly,
       linkUrl,
+      classes,
+      isEmpty,
       editor,
       isLink,
       style,

package/components/fields/FSSearchField.vue

@@ -1,5 +1,6 @@
 <template>
   <FSTextField
+    class="fs-search-field"
     :editable="$props.editable"
     :placeholder="placeholder"
     @keydown.enter="onSearch"
@@ -57,8 +58,7 @@ import type { PropType} from "vue";
 import { computed, defineComponent, ref, watch } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import { useSlots } from "../../composables";