@dative-gpi/foundation-shared-components 0.0.211 → 0.0.213

package/components/FSEditImage.vue

@@ -65,13 +65,13 @@
           >
             <FSText
               v-if="fileSelected && fileSelected.fileName"
-              lineClamp="2"
               font="text-body"
+              :lineClamp="2"
             >
               {{ fileSelected.fileName }}
             </FSText>
             <FSCol
-              gap="0"
+              gap="0px"
             >
               <FSText
                 class="fs-edit-image-overline"
@@ -97,7 +97,7 @@
           <FSButtonFileMini
             accept="image/*"
             :readFile="false"
-            @update:modelValue="onUpload"
+            @update:metadata="onUpload"
           />
           <FSButtonRemoveMini
             @click="onRemove"
@@ -124,7 +124,7 @@
         <FSButtonFileMini
           accept="image/*"
           :readFile="false"
-          @update:modelValue="onUpload"
+          @update:metadata="onUpload"
         />
         <FSButtonRemoveMini
           @click="onRemove"
@@ -147,17 +147,17 @@
           mdi-plus-box-outline
         </FSIcon>
         <FSText
-          lineClamp="2"
           font="text-body"
+          :lineClamp="2"
         >
           {{ $tr('ui.edit-image.add-image', 'Add an image.') }}
         </FSText>
         <FSButtonFileMini
-          ref="invisibleButtonRef"
           class="fs-edit-image-hidden-button"
+          ref="invisibleButtonRef"
           accept="image/*"
           :readFile="false"
-          @update:modelValue="onUpload"
+          @update:metadata="onUpload"
         />
       </FSRow>
     </FSClickable>
@@ -165,13 +165,11 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum, type FileImage } from "@dative-gpi/foundation-shared-components/models";
 import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
-import type { FileImage } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButtonRemoveMini from "./buttons/FSButtonRemoveMini.vue";
 import FSButtonFileMini from "./buttons/FSButtonFileMini.vue";

package/components/fields/FSRichTextField.vue

@@ -138,10 +138,10 @@
             :elevation="true"
           >
             <FSAutoCompleteField
-              itemTitle="code"
+              itemTitle="label"
+              itemValue="code"
               :placeholder="$tr('ui.rich-text-field.variable-placeholder', 'Choose a variable...')"
               :items="$props.variableReferences"
-              :returnObject="true"
               @update:modelValue="insertVariable($event)"
             />
           </FSCard>
@@ -291,7 +291,7 @@ export default defineComponent({
       default: () => []
     },
     variableValues: {
-      type: Object,
+      type: Object as PropType<{ [key: string]: any }>,
       required: false,
       default: () => ({})
     },
@@ -502,12 +502,16 @@ export default defineComponent({
       });
     };
 
-    const insertVariable = (variable: { code: string; defaultValue: any; type: string }) => {
+    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(variable.code, variable.defaultValue, variable.type);
+          const variableNode = $createVariableNode(code, variable.defaultValue);
           selection.insertNodes([variableNode]);
         }
       });

package/components/map/FSMap.vue

@@ -34,7 +34,7 @@
         class="fs-map-overlay-edit-button"
       >
         <FSButton
-          prependIcon="mdi-pencil"
+          prependIcon="mdi-pencil-outline"
           :label="$tr('ui.map.modify', 'Modify')"
           @click="editingLocation = true"
         />

package/models/richTextVariable.ts

@@ -1,5 +1,5 @@
 export interface RichTextVariable {
+  label: string;
   code: string;
   defaultValue: string;
-  typeName: string;
 }

package/models/variableNode.ts

@@ -1,12 +1,12 @@
 import { type LexicalNode, DecoratorNode, type SerializedLexicalNode, type Spread, type EditorConfig, type LexicalEditor } from "lexical";
-import type { RichTextVariable } from "./richTextVariable";
+
+import { type RichTextVariable } from "./richTextVariable";
 
 export type SerializedVariableNode = Spread<
   {
     type: "variable";
     code: string;
     defaultValue: string;
-    typeName: string;
   },
   SerializedLexicalNode
 >;
@@ -14,7 +14,6 @@ export type SerializedVariableNode = Spread<
 export class VariableNode extends DecoratorNode<Element> {
   __code: string;
   __defaultValue: string;
-  __typeName: string;
   readonlyMode: boolean;
 
   static getType() {
@@ -22,20 +21,21 @@ export class VariableNode extends DecoratorNode<Element> {
   }
 
   static clone(node: VariableNode) {
-    return new VariableNode(node.__code, node.__defaultValue, node.__typeName, node.__key);
+    return new VariableNode(node.__code, node.__defaultValue, node.__key);
   }
 
-  constructor(code: string, defaultValue: string, typeName: string, key?: string) {
+  constructor(code: string, defaultValue: string, key?: string) {
     super(key);
     this.__code = code;
     this.__defaultValue = defaultValue;
-    this.__typeName = typeName;
     this.readonlyMode = false;
   }
 
   getValue(editorElement: HTMLElement): any {
     const variableValues = editorElement.dataset.variableValues;
-    if (!variableValues) { return this.__defaultValue; }
+    if (!variableValues) {
+      return this.__defaultValue;
+    }
     const values = JSON.parse(variableValues);
     return values[this.__code] ?? this.__defaultValue;
   }
@@ -51,10 +51,12 @@ export class VariableNode extends DecoratorNode<Element> {
       content.classList.add("fs-rich-text-field-node-variable-value");
       if (_editor._rootElement) {
         content.textContent = this.getValue(_editor._rootElement);
-      } else {
+      }
+      else {
         content.textContent = this.__defaultValue;
       }
-    } else {
+    }
+    else {
       content.classList.add("fs-rich-text-field-node-variable-code");
       content.textContent = `{${this.__code}}`
     }
@@ -71,8 +73,7 @@ export class VariableNode extends DecoratorNode<Element> {
       type: "variable",
       version: 1,
       code: this.__code,
-      defaultValue: this.__defaultValue,
-      typeName: this.__typeName,
+      defaultValue: this.__defaultValue
     };
   }
 
@@ -83,20 +84,18 @@ export class VariableNode extends DecoratorNode<Element> {
   static importJSON(serializedNode: SerializedVariableNode): VariableNode {
     return new VariableNode(
       serializedNode.code,
-      serializedNode.defaultValue,
-      serializedNode.typeName
+      serializedNode.defaultValue
     );
   }
 }
 
-export function $createVariableNode(code: string, defaultValue: string, typeName: string): VariableNode {
-  return new VariableNode(code, defaultValue, typeName);
+export function $createVariableNode(code: string, defaultValue: string): VariableNode {
+  return new VariableNode(code, defaultValue);
 }
 
 export function $modifyVariableNode(node: VariableNode, newValue: RichTextVariable): VariableNode {
   node.__code = newValue.code;
   node.__defaultValue = newValue.defaultValue;
-  node.__typeName = newValue.typeName;
   return node;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.211",
+  "version": "0.0.213",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.211",
-    "@dative-gpi/foundation-shared-services": "0.0.211"
+    "@dative-gpi/foundation-shared-domain": "0.0.213",
+    "@dative-gpi/foundation-shared-services": "0.0.213"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "8590b4c465c53844253e13aceb01d14ad25c95ee"
+  "gitHead": "0b705c623649ff8e3a9d03c9ae2ac0463864de45"
 }