@dative-gpi/foundation-shared-components 0.1.120 → 1.0.1

package/components/fields/FSRichTextField.vue

@@ -115,6 +115,37 @@
         >
           mdi-link
         </FSIcon>
+        <v-menu
+          v-if="$props.variableReferences && $props.variableReferences.length > 0"
+          :closeOnContentClick="false"
+          v-model="menuVariable"
+        >
+          <template
+            v-slot:activator="{ props }"
+          >
+            <FSIcon
+              v-bind="props"
+              class="fs-rich-text-field-icon"
+              :color="toolbarColors.variable"
+              :style="style"
+            >
+              mdi-variable
+            </FSIcon>
+          </template>
+          <FSCard
+            padding="12"
+            width="300px"
+            :elevation="true"
+          >
+            <FSAutoCompleteField
+              itemTitle="label"
+              itemValue="code"
+              :placeholder="$tr('ui.rich-text-field.variable-placeholder', 'Choose a variable...')"
+              :items="$props.variableReferences"
+              @update:modelValue="insertVariable($event)"
+            />
+          </FSCard>
+        </v-menu>
         <v-divider
           vertical
         />
@@ -150,10 +181,21 @@
     </FSRow>
     <div
       class="fs-rich-text-field"
-      :id="id"
       :style="style"
-      :contenteditable="!readonly && $props.editable"
-    />
+    >
+      <div
+        class="fs-rich-text-field-content"
+        :data-variable-values="JSON.stringify($props.variableValues)"
+        :contenteditable="!readonly && $props.editable"
+        :data-readonly="$props.variant === 'readonly'"
+        :id="id"
+      />
+      <slot
+        name="append-inner"
+        v-bind="{ props: $props }"
+      />
+    </div>
+
     <FSTextField
       v-if="isLink && !readonly && $props.editable"
       :hideHeader="true"
@@ -176,27 +218,35 @@
 </template>
 
 <script lang="ts">
-import { $createParagraphNode, $getSelection, $isElementNode, $isRangeSelection, $setSelection, CAN_UNDO_COMMAND, createEditor, ElementNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, ParagraphNode, UNDO_COMMAND } from "lexical";
-import { $createHeadingNode, HeadingNode, HeadingTagType, registerRichText } from "@lexical/rich-text";
+import { computed, defineComponent, onMounted, type PropType, ref, 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";
 import { createEmptyHistoryState, registerHistory } from "@lexical/history";
-import { computed, defineComponent, onMounted, PropType, ref, watch } from "vue";
 import { $createLinkNode, $isLinkNode, LinkNode } from "@lexical/link";
 import { $wrapNodes } from "@lexical/selection";
 
+import { emptyLexicalState, getAncestor, getSelectedNode } from "@dative-gpi/foundation-shared-components/utils";
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { getAncestor, getSelectedNode } from "@dative-gpi/foundation-shared-components/utils";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import { $createVariableNode, $isVariableNode, VariableNode } from "../../models/variableNode";
+import { type RichTextVariable } from "../../models/richTextVariable";
 
+import FSAutoCompleteField from "./FSAutocompleteField.vue";
 import FSTextField from "./FSTextField.vue";
 import FSIcon from "../FSIcon.vue";
+import FSCard from "../FSCard.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSRichTextField",
   components: {
+    FSAutoCompleteField,
     FSTextField,
     FSIcon,
+    FSCard,
     FSCol,
     FSRow
   },
@@ -236,6 +286,15 @@ export default defineComponent({
       required: false,
       default: "standard"
     },
+    variableReferences: {
+      type: Array as PropType<Array<RichTextVariable>>,
+      default: () => []
+    },
+    variableValues: {
+      type: Object as PropType<{ [key: string]: any }>,
+      required: false,
+      default: () => ({})
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -247,7 +306,7 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
 
-    const linkColors = computed(()=> getColors(props.linkColor));
+    const linkColors = computed(() => getColors(props.linkColor));
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
@@ -257,13 +316,13 @@ export default defineComponent({
     const isItalic = ref(false);
     const isUnderline = ref(false);
     const isStrikethrough = ref(false);
+    const isVariable = ref(false);
+    const menuVariable = ref(false);
 
     const id = `${Math.random()}-editor`;
-    const emptyState = "{\"root\":{\"children\":[{\"children\":[],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}";
-
 
     const linkUrl = ref("https://");
-    
+
     const config = {
       namespace: "MyEditor",
       theme: {
@@ -285,7 +344,8 @@ export default defineComponent({
       nodes: [
         HeadingNode,
         LinkNode,
-        ParagraphNode
+        ParagraphNode,
+        VariableNode
       ],
       onError: console.error
     }
@@ -305,7 +365,7 @@ export default defineComponent({
       }
       else {
         editor.update((): void => {
-          editor.setEditorState(editor.parseEditorState(emptyState));
+          editor.setEditorState(editor.parseEditorState(emptyLexicalState));
         });
       }
     });
@@ -314,7 +374,7 @@ export default defineComponent({
       return ["readonly"].includes(props.variant);
     });
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): { [key: string]: string | null | undefined } => {
       let minHeight: string | undefined = "auto";
       if (!readonly.value) {
         const base = isMobileSized.value ? 30 : 42;
@@ -331,38 +391,40 @@ 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
             };
           }
           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-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-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
             };
           }
         }
         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
         }
       }
     });
 
-    const toolbarColors = computed((): {[code: string]: string} => {
+    const toolbarColors = computed((): { [code: string]: string } => {
       if (props.editable) {
         return {
           undo: canUndo.value ? darks.base : lights.base,
@@ -370,7 +432,8 @@ export default defineComponent({
           italic: isItalic.value ? darks.base : lights.base,
           underline: isUnderline.value ? darks.base : lights.base,
           strikethrough: isStrikethrough.value ? darks.base : lights.base,
-          link: isLink.value ? darks.base : lights.base
+          link: isLink.value ? darks.base : lights.base,
+          variable: isVariable.value ? darks.base : lights.base
         };
       }
       else {
@@ -387,6 +450,7 @@ export default defineComponent({
 
     const updateToolbar = (): void => {
       const selection = $getSelection();
+      isVariable.value = false;
       if ($isRangeSelection(selection)) {
         isBold.value = selection.hasFormat("bold");
         isItalic.value = selection.hasFormat("italic");
@@ -394,12 +458,17 @@ export default defineComponent({
         isStrikethrough.value = selection.hasFormat("strikethrough");
         isLink.value = $isLinkNode(getSelectedNode(selection)) || $isLinkNode(getSelectedNode(selection).getParent());
       }
+      else if($isNodeSelection(selection)){
+        if($isVariableNode(selection?.getNodes()[0])){
+          isVariable.value = true;
+        }
+      }
     };
 
     editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
         updateToolbar();
-        if (JSON.stringify(editorState.toJSON()) !== emptyState) {
+        if (JSON.stringify(editorState.toJSON()) !== emptyLexicalState) {
           emit("update:modelValue", JSON.stringify(editorState.toJSON()));
         }
         else {
@@ -433,6 +502,21 @@ export default defineComponent({
       });
     };
 
+    const insertVariable = (code: string) => {
+      const variable = props.variableReferences.find((v) => v.code === code);
+      if (!variable) {
+        return;
+      }
+      menuVariable.value = false;
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          const variableNode = $createVariableNode(code, variable.defaultValue);
+          selection.insertNodes([variableNode]);
+        }
+      });
+    };
+
     const openLink = (): void => {
       if (!isLink.value) {
         isLink.value = true;
@@ -444,7 +528,7 @@ export default defineComponent({
           if ($isRangeSelection(selection)) {
             toggleLink();
           }
-        }); 
+        });
       }
     };
 
@@ -494,7 +578,7 @@ export default defineComponent({
             let linkNode: LinkNode | null = null;
             nodes.forEach((node) => {
               const parent = node.getParent();
-              if ( parent === linkNode || parent === null || ($isElementNode(node) && !node.isInline())) {
+              if (parent === linkNode || parent === null || ($isElementNode(node) && !node.isInline())) {
                 return;
               }
               if ($isLinkNode(parent)) {
@@ -513,7 +597,7 @@ export default defineComponent({
               }
               if (!parent.is(prevParent)) {
                 prevParent = parent;
-                linkNode = $createLinkNode(linkUrl.value, {rel, target, title});
+                linkNode = $createLinkNode(linkUrl.value, { rel, target, title });
 
                 if ($isLinkNode(parent)) {
                   if (node.getPreviousSibling() === null) {
@@ -558,30 +642,32 @@ export default defineComponent({
             editor.setEditorState(editor.parseEditorState(props.modelValue!));
           });
         }
-        else if (JSON.stringify(editor.getEditorState().toJSON()) !== emptyState) {
+        else if (JSON.stringify(editor.getEditorState().toJSON()) !== emptyLexicalState) {
           editor.update(() => {
-            editor.setEditorState(editor.parseEditorState(emptyState));
+            editor.setEditorState(editor.parseEditorState(emptyLexicalState));
           });
         }
       }
     });
 
     return {
+      FORMAT_ELEMENT_COMMAND,
+      FORMAT_TEXT_COMMAND,
+      toolbarColors,
+      menuVariable,
+      UNDO_COMMAND,
       readonly,
-      style,
-      id,
+      linkUrl,
       editor,
       isLink,
-      linkUrl,
-      toolbarColors,
-      openLink,
-      toggleLink,
-      formatText,
+      style,
+      id,
       formatParagraph,
-      UNDO_COMMAND,
-      FORMAT_TEXT_COMMAND,
-      FORMAT_ELEMENT_COMMAND,
-    }
+      insertVariable,
+      formatText,
+      toggleLink,
+      openLink
+    };
   }
 });
 </script>

package/components/fields/FSSearchField.vue

@@ -1,10 +1,5 @@
 <template>
   <FSTextField
-    :label="$props.label"
-    :description="$props.description"
-    :color="$props.color"
-    :hideHeader="$props.hideHeader"
-    :required="$props.required"
     :editable="$props.editable"
     :placeholder="placeholder"
     @keydown.enter="onSearch"
@@ -12,56 +7,60 @@
     v-bind="$attrs"
   >
     <template
-      v-if="$props.prependInnerIcon"
-      #prepend-inner
+      v-for="(_, name) in slots"
+      v-slot:[name]="slotData"
     >
       <slot
-        name="prepend-inner"
-      >
-        <FSButton
-          variant="icon"
-          :icon="$props.prependInnerIcon"
-          :editable="$props.editable"
-          :color="ColorEnum.Dark"
-          @click="onSearch"
-        />
-      </slot>
+        :name="name"
+        v-bind="slotData"
+      />
     </template>
     <template
-      v-if="!['instant'].includes($props.variant)"
-      #append
+      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="append"
-      >
-        <FSButton
-          :prependIcon="$props.buttonPrependIcon"
-          :label="buttonLabel"
-          :appendIcon="$props.buttonAppendIcon"
-          :variant="$props.buttonVariant"
-          :color="$props.buttonColor"
-          :editable="$props.editable"
-          @click="onSearch"
-        />
-      </slot>
+        name="prepend-inner"
+      />
     </template>
     <template
-      v-for="(_, name) in $slots"
-      v-slot:[name]="slotData"
+      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="name"
-        v-bind="slotData"
+        name="append"
       />
     </template>
   </FSTextField>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, ref, watch } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import { useSlots } from "../../composables";
 
 import FSTextField from "./FSTextField.vue";
 import FSButton from "../FSButton.vue";
@@ -73,16 +72,6 @@ export default defineComponent({
     FSButton
   },
   props: {
-    label: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     placeholder: {
       type: String as PropType<string | null>,
       required: false,
@@ -123,26 +112,11 @@ export default defineComponent({
       required: false,
       default: null
     },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Dark
-    },
     buttonColor: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
     },
-    hideHeader: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     editable: {
       type: Boolean,
       required: false,
@@ -152,6 +126,10 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { $tr } = useTranslationsProvider();
+    const { slots } = useSlots();
+
+    delete slots["prepend-inner"];
+    delete slots.append;
 
     const innerValue = ref(props.modelValue);
 
@@ -180,6 +158,7 @@ export default defineComponent({
       buttonLabel,
       innerValue,
       ColorEnum,
+      slots,
       onSearch
     };
   }