@dative-gpi/foundation-shared-components 0.0.205 → 0.0.207

package/components/map/FSMapEditPointAddressOverlay.vue

@@ -1,8 +1,8 @@
 <template>
   <FSCard
     padding="16px"
-    width="100%"
     height="100%"
+    width="100%"
     :elevation="true"
   >
     <FSCol
@@ -50,11 +50,11 @@
             />
           </FSRow>
           <FSButton
-            :label="$tr('ui.map.save', 'Save')"
+            prependIcon="mdi-content-save"
+            style="display: none;"
             color="primary"
-            prepend-icon="mdi-content-save"
             type="submit"
-            style="display: none;"
+            :label="$tr('ui.map.save', 'Save')"
           />
         </FSForm>
       </FSCol>
@@ -66,9 +66,9 @@
           @click="onCancel"
         />
         <FSButton
-          :label="$tr('ui.map.save', 'Save')"
+          prependIcon="mdi-content-save"
           color="primary"
-          prepend-icon="mdi-content-save"
+          :label="$tr('ui.map.save', 'Save')"
           @click="onSubmit"
         />
       </FSRow>
@@ -104,17 +104,16 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: Object as PropType<Address>,
-      default: null,
-      required: false,
+      type: Object as PropType<Address | null>,
+      default: null
     }
   },
   emits: ["update:modelValue", "update:locationCoordinates", "submit", "cancel"],
   setup(props, { emit }) {
     const menuLocationCoordinates = ref(false);
 
-    const latitude = ref(props.modelValue.latitude);
-    const longitude = ref(props.modelValue.longitude);
+    const latitude = ref(0);
+    const longitude = ref(0);
 
     const onCoordinatesChange = () => {
       const newModelValue = new Address({
@@ -130,7 +129,7 @@ export default defineComponent({
     };
 
     const onAddressFieldSubmit = (address: Address|null) => {
-      if(address === null) {
+      if(!address) {
         return;
       }
       emit('update:modelValue', address);
@@ -144,10 +143,12 @@ export default defineComponent({
       emit('cancel');
     };
 
-    watch(() => props.modelValue, (value) => {
-      latitude.value = value.latitude;
-      longitude.value = value.longitude;
-    });
+    watch(() => props.modelValue, () => {
+      if (props.modelValue) {
+        latitude.value = props.modelValue.latitude;
+        longitude.value = props.modelValue.longitude;
+      }
+    }, { immediate: true });
 
     return {
       menuLocationCoordinates,
@@ -155,8 +156,8 @@ export default defineComponent({
       latitude,
       onAddressFieldSubmit,
       onCoordinatesChange,
-      onSubmit,
-      onCancel
+      onCancel,
+      onSubmit
     };
   }
 });

package/components/map/FSMapLayerButton.vue

@@ -0,0 +1,71 @@
+<template>
+  <FSButton
+    prependIcon="mdi-layers-outline"
+    :elevation="true"
+    @click="dialog = true"
+  />
+  <FSDialog
+    v-model="dialog"
+    title="Select Layers"
+    width="460px"
+  >
+    <template
+      v-slot:body
+    >
+      <FSImageCard
+        v-for="layer in layers"
+        :variant="modelValue === layer.name ? 'full' : 'background'"
+        :color="modelValue === layer.name ? 'primary' : 'light'"
+        :label="layer.label"
+        :src="layer.image"
+        :key="layer.name"
+        @click="onLayerClick(layer.name)"
+      />
+    </template>
+  </FSDialog> 
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, ref } from "vue";
+
+import { type MapLayer } from "../../models";
+
+import FSImageCard from "../FSImageCard.vue";
+import FSButton from "../FSButton.vue";
+import FSDialog from "../FSDialog.vue";
+
+export default defineComponent({
+  name: "FSMapLayerButton",
+  components: {
+    FSImageCard,
+    FSButton,
+    FSDialog
+  },
+  props: {
+    layers: {
+      type: Array as PropType<MapLayer[]>,
+      required: false,
+      default: () => []
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(_, { emit }) {
+    const dialog = ref(false);
+
+    const onLayerClick = (layer: string) => {
+      emit("update:modelValue", layer);
+      dialog.value = false;
+    };
+
+    return {
+      dialog,
+      onLayerClick
+    };
+  }
+});
+</script>

package/models/map.ts

@@ -5,6 +5,7 @@ import { type Address } from "@dative-gpi/foundation-shared-domain/models";
 export interface MapLayer {
   name : string;
   label: string;
+  image: string;
   layer: Layer;
 }
 

package/models/richTextVariable.ts

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

package/models/variableNode.ts

@@ -0,0 +1,105 @@
+import { type LexicalNode, DecoratorNode, type SerializedLexicalNode, type Spread, type EditorConfig, type LexicalEditor } from "lexical";
+import type { RichTextVariable } from "./richTextVariable";
+
+export type SerializedVariableNode = Spread<
+  {
+    type: "variable";
+    code: string;
+    defaultValue: string;
+    typeName: string;
+  },
+  SerializedLexicalNode
+>;
+
+export class VariableNode extends DecoratorNode<Element> {
+  __code: string;
+  __defaultValue: string;
+  __typeName: string;
+  readonlyMode: boolean;
+
+  static getType() {
+    return "variable";
+  }
+
+  static clone(node: VariableNode) {
+    return new VariableNode(node.__code, node.__defaultValue, node.__typeName, node.__key);
+  }
+
+  constructor(code: string, defaultValue: string, typeName: 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; }
+    const values = JSON.parse(variableValues);
+    return values[this.__code] ?? this.__defaultValue;
+  }
+
+  createDOM(_config: EditorConfig, _editor: LexicalEditor) {
+    const readonlyMode = _editor._rootElement?.dataset.readonly === "true" || false;
+
+    const container = document.createElement("span");
+    container.classList.add("fs-richtextfield-node-variable");
+
+    const content = document.createElement("span");
+    if (readonlyMode) {
+      content.classList.add("fs-rich-text-field-node-variable-value");
+      if (_editor._rootElement) {
+        content.textContent = this.getValue(_editor._rootElement);
+      } else {
+        content.textContent = this.__defaultValue;
+      }
+    } else {
+      content.classList.add("fs-rich-text-field-node-variable-code");
+      content.textContent = `{${this.__code}}`
+    }
+    container.appendChild(content);
+    return container;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  exportJSON(): SerializedVariableNode {
+    return {
+      type: "variable",
+      version: 1,
+      code: this.__code,
+      defaultValue: this.__defaultValue,
+      typeName: this.__typeName,
+    };
+  }
+
+  decorate(editor: LexicalEditor, config: EditorConfig): Element {
+    return this.createDOM(config, editor);
+  }
+
+  static importJSON(serializedNode: SerializedVariableNode): VariableNode {
+    return new VariableNode(
+      serializedNode.code,
+      serializedNode.defaultValue,
+      serializedNode.typeName
+    );
+  }
+}
+
+export function $createVariableNode(code: string, defaultValue: string, typeName: string): VariableNode {
+  return new VariableNode(code, defaultValue, typeName);
+}
+
+export function $modifyVariableNode(node: VariableNode, newValue: RichTextVariable): VariableNode {
+  node.__code = newValue.code;
+  node.__defaultValue = newValue.defaultValue;
+  node.__typeName = newValue.typeName;
+  return node;
+}
+
+export function $isVariableNode(node: LexicalNode | null | undefined): node is VariableNode {
+  return node instanceof VariableNode;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.205",
+  "version": "0.0.207",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.205",
-    "@dative-gpi/foundation-shared-services": "0.0.205"
+    "@dative-gpi/foundation-shared-domain": "0.0.207",
+    "@dative-gpi/foundation-shared-services": "0.0.207"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "5921db5434ded466e46ff785f53b082fcb5aa4ce"
+  "gitHead": "1387dbf5d3b11c281c0e6183ab900e47c9622a9a"
 }

package/styles/components/fs_image_card.scss

@@ -0,0 +1,18 @@
+.fs-image-card {
+  > .fs-card {
+    background-image: var(--fs-image-card-background);
+    background-size: 100%;
+    background-position: center;
+  }
+
+  .fs-image-card-label {
+    background-color: #0000009d;
+    color: white;
+  }
+}
+
+.fs-image-card:hover {
+  > .fs-card {
+    background-size: 105%;
+  }
+}

package/styles/components/fs_map.scss

@@ -9,21 +9,12 @@
     filter: grayscale(var(--fs-map-container-grayscale));
   }
 
-  .fs-map-overlay-layer-choice {
+  .fs-map-overlay-left {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 950;
     margin: 8px;
-
-    >* {
-      opacity: 0.7;
-      transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    >*:hover {
-      opacity: 1;
-    }
   }
 
   .fs-map-overlay-edit-button {
@@ -34,10 +25,17 @@
     margin: 8px;
   }
 
-  .fs-map-overlay-container {
+  .fs-map-overlay-right-top {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 4px 8px;
+  }
+
+  .fs-map-overlay-right-bottom {
     position: absolute;
     bottom: 0;
-    left: 0;
+    right: 0;
     z-index: 1000;
     margin: 4px 8px;
     width: calc(100% - 16px);
@@ -61,8 +59,6 @@
         border-top-right-radius: 0 !important;
 
         border-top: solid 1px var(--fs-card-border-color) !important;
-
-
       }
     }
   }

package/styles/components/fs_rich_text_field.scss

@@ -1,19 +1,31 @@
 .fs-rich-text-field {
     width: 100%;
     min-width: 120px;
-    outline: none !important;
     border: 1px solid var(--fs-rich-text-field-border-color) !important;
     border-radius: 4px !important;
 
-    min-height: var(--fs-rich-text-field-min-height);
-    color: var(--fs-rich-text-field-color);
+
     margin: 2px 2px 2px 0 !important;
 
+    .fs-rich-text-field-content {
+        color: var(--fs-rich-text-field-color);
+        width: 100%;
+        min-height: var(--fs-rich-text-field-min-height);
+        outline: none !important;
+    }
+
+    .fs-richtextfield-node-variable {
+        .fs-rich-text-field-node-variable-code {
+            background-color: var(--fs-rich-text-field-variable-backgroundcolor);
+            color: var(--fs-rich-text-field-variable-color);
+            border-radius: 4px;
+        }
+    }
 
     &:focus-within {
         border-color: var(--fs-rich-text-field-active-border-color) !important;
     }
-        
+
     @include web {
         padding: 10px 12px !important;
     }

package/styles/components/index.scss

@@ -31,6 +31,7 @@
 @import "fs_icon_field.scss";
 @import "fs_icon.scss";
 @import "fs_image.scss";
+@import "fs_image_card.scss";
 @import "fs_label.scss";
 @import "fs_link.scss";
 @import "fs_load_data_table.scss";

package/utils/lexical.ts

@@ -1,6 +1,8 @@
 import type { ElementNode, LexicalNode, RangeSelection, TextNode } from "lexical";
 import { $isAtNodeEnd } from "@lexical/selection";
 
+export const emptyLexicalState = "{\"root\":{\"children\":[{\"children\":[],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}";
+
 export const getSelectedNode = (selection: RangeSelection): ElementNode | TextNode => {
   const anchor = selection.anchor;
   const focus = selection.focus;