@dative-gpi/foundation-shared-components 1.0.56 → 1.0.58-groupings

package/components/fields/FSMagicConfigField.vue

@@ -3,10 +3,11 @@
     class="fs-magic-config-field"
   >
     <component
+      v-if="$props.type"
       class="fs-magic-config-field-value"
       :is="get($props.type)"
-      :label="$tr('ui.magic-config-field.value', 'Value')"
-      :editable="$props.editable"
+      :label="$tr('ui.common.value', 'Value')"
+      :disabled="$props.disabled"
       :required="true"
       :rules="rules"
       :modelValue="valueToInput"
@@ -16,8 +17,8 @@
       gap="24px"
     >
       <FSTranslateField
-        :label="$tr('ui.magic-config-field.label', 'Label')"
-        :editable="$props.editable"
+        :label="$tr('entity.common.label', 'Label')"
+        :disabled="$props.disabled"
         :modelValue="$props.labelDefault"
         :translations="$props.translations"
         @update:modelValue="$emit('update:labelDefault', $event)"
@@ -42,7 +43,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules } from "../../models";
+import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules, AutocompleteRules } from "../../models";
 import { useMagicFieldProvider } from "../../composables";
 import { MagicFieldType } from "../../models/magicFields";
 
@@ -80,10 +81,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["click:remove", "click:add", "update:modelValue", "update:labelDefault", "update:translations"],
@@ -104,6 +105,8 @@ export default defineComponent({
           return [TimeRules.required()];
         case MagicFieldType.TimeStepField:
           return [TimeStepRules.required()];
+        case MagicFieldType.PlotPerField:
+          return [AutocompleteRules.required()];
       }
       return [];
     });
@@ -125,6 +128,8 @@ export default defineComponent({
           return props.modelValue === "true";
         case MagicFieldType.TimeStepField:
           return JSON.parse(props.modelValue);
+        case MagicFieldType.PlotPerField:
+          return parseInt(props.modelValue);
         default:
           return props.modelValue;
       }
@@ -145,6 +150,9 @@ export default defineComponent({
         case MagicFieldType.TimeStepField:
           emit("update:modelValue", JSON.stringify(value));
           break;
+        case MagicFieldType.PlotPerField:
+          emit("update:modelValue", value.toString());
+          break;
         default:
           emit("update:modelValue", value);
           break;

package/components/fields/FSMagicField.vue

@@ -131,6 +131,8 @@ export default defineComponent({
           return props.modelValue === "true";
         case MagicFieldType.TimeStepField:
           return JSON.parse(props.modelValue);
+        case MagicFieldType.PlotPerField:
+          return parseInt(props.modelValue);
         default:
           return props.modelValue;
       }
@@ -146,9 +148,9 @@ export default defineComponent({
           return value.toString();
         case MagicFieldType.Switch:
           if (value) {
-            return $tr("ui.magic-field.true", "True");
+            return $tr("magic-field.true", "True");
           }
-          return $tr("ui.magic-field.false", "False");
+          return $tr("magic-field.false", "False");
         case MagicFieldType.DateTimeField:
           return epochToShortTimeFormat(parseFloat(value));
         case MagicFieldType.TimeField:
@@ -175,6 +177,9 @@ export default defineComponent({
         case MagicFieldType.TimeStepField:
           emit("update:modelValue", JSON.stringify(value));
           break;
+        case MagicFieldType.PlotPerField:
+          emit("update:modelValue", value.toString());
+          break;
         default:
           emit("update:modelValue", value);
           break;

package/components/fields/FSNumberField.vue

@@ -1,7 +1,8 @@
 <template>
   <FSTextField
     class="fs-number-field"
-    :editable="$props.editable"
+    minWidth="80px"
+    :disabled="$props.disabled"
     :modelValue="$props.modelValue?.toString()"
     @update:modelValue="onUpdate"
     v-bind="$attrs"
@@ -34,18 +35,22 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
   setup(_, { emit }) {
-    const onUpdate = (value: string) => {
+    const onUpdate = (value: string | null | undefined) => {
       if (value === "-") {
         return;
       }
+      if(value === null || value === undefined) {
+        emit("update:modelValue", null);
+        return;
+      }
       const match = /[-]?([0-9 ]*[,.]?)?[0-9]*/.exec(value);
       if (match != null && !isNaN(parseFloat(match[0].replace(",", ".").replace(" ", "")))) {
         emit("update:modelValue", parseFloat(match[0].replace(",", ".").replace(" ", "")));

package/components/fields/FSPasswordField.vue

@@ -1,7 +1,7 @@
 <template>
   <FSTextField
     :type="type"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -20,7 +20,7 @@
     >
       <FSButton
         variant="icon"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :color="ColorEnum.Dark"
         :icon="icon"
         @click="onToggle"
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
+import { computed, defineComponent, ref, type PropType, type StyleValue } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -53,10 +53,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -69,7 +69,7 @@ export default defineComponent({
     const stars = ref(true);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-password-field-cursor"   : "default",
           "--fs-password-field-color": lights.dark,
@@ -88,7 +88,7 @@ export default defineComponent({
     const icon = computed((): string => stars.value ? "mdi-eye-off-outline" : "mdi-eye-outline");
 
     const onToggle = (): void => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       stars.value = !stars.value;

package/components/fields/FSRichTextField.vue

@@ -29,9 +29,10 @@
           </FSSpan>
         </FSRow>
       </slot>
-      <v-spacer />
-      <template
-        v-if="$props.editable"
+      <FSRow
+        v-if="!$props.disabled"
+        align="center-right"
+        :wrap="false"
       >
         <FSIcon
           class="fs-rich-text-field-icon"
@@ -115,7 +116,7 @@
         >
           mdi-link
         </FSIcon>
-        <v-menu
+        <FSMenu
           v-if="$props.variableReferences && $props.variableReferences.length > 0"
           :closeOnContentClick="false"
           v-model="menuVariable"
@@ -140,12 +141,12 @@
             <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)"
             />
           </FSCard>
-        </v-menu>
+        </FSMenu>
         <v-divider
           vertical
         />
@@ -177,7 +178,7 @@
         >
           mdi-format-align-justify
         </FSIcon>
-      </template>
+      </FSRow>
     </FSRow>
     <FSText
       v-if="readonly && !$props.modelValue && $props.emptyLabel"
@@ -191,8 +192,8 @@
     >
       <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.disabled && !loading"
         :data-readonly="$props.variant === 'readonly'"
         :id="id"
       />
@@ -203,7 +204,7 @@
     </div>
 
     <FSTextField
-      v-if="isLink && !readonly && $props.editable"
+      v-if="isLink && !readonly && !$props.disabled"
       :hideHeader="true"
       @keypress.enter.stop="toggleLink"
       v-model="linkUrl"
@@ -214,7 +215,8 @@
       <FSSpan
         v-if="!readonly && $props.description"
         class="fs-rich-text-field-description"
-        font="text-underline"
+        font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}
@@ -244,6 +246,7 @@ import FSTextField from "./FSTextField.vue";
 import FSIcon from "../FSIcon.vue";
 import FSCard from "../FSCard.vue";
 import FSText from "../FSText.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
@@ -255,6 +258,7 @@ export default defineComponent({
     FSText,
     FSIcon,
     FSCard,
+    FSMenu,
     FSCol,
     FSRow
   },
@@ -275,7 +279,7 @@ export default defineComponent({
       default: null
     },
     modelValue: {
-      type: String as PropType<string | null>,
+      type: [Object, String] as PropType<{ [key: string]: any } | string | null>,
       required: false,
       default: null
     },
@@ -308,21 +312,22 @@ export default defineComponent({
       required: false,
       default: () => ({})
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   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);
@@ -375,16 +380,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 => {
@@ -405,37 +402,43 @@ export default defineComponent({
       }
       switch (props.variant) {
         case "standard": {
-          if (!props.editable) {
+          if (props.disabled) {
             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
         }
       }
     });
@@ -449,7 +452,7 @@ export default defineComponent({
     });
 
     const toolbarColors = computed((): { [code: string]: string } => {
-      if (props.editable) {
+      if (!props.disabled) {
         return {
           undo: canUndo.value ? darks.base : lights.base,
           bold: isBold.value ? darks.base : lights.base,
@@ -472,6 +475,10 @@ export default defineComponent({
       }
     });
 
+    const variableValues = computed(() => {
+      return JSON.stringify(props.variableValues)
+    });
+
     const updateToolbar = (): void => {
       const selection = $getSelection();
       isVariable.value = false;
@@ -492,11 +499,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 && props.modelValue !== null) {
           emit("update:modelValue", null);
+          return;
+        }
+        if(editorModelValue !== emptyLexicalState && editorModelValue !== props.modelValue) {
+          emit("update:modelValue", editorModelValue);
         }
       });
     });
@@ -659,24 +671,31 @@ 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!));
-          });
+    const updateEditorState = () => {     
+      if (JSON.stringify(editor.getEditorState().toJSON()) === props.modelValue) {
+        return;
+      }
+      if (props.modelValue != null) {
+        if (typeof props.modelValue === "string" && props.modelValue !== "") {
+          editor.setEditorState(editor.parseEditorState(props.modelValue!));
+          return;
         }
-        else if (JSON.stringify(editor.getEditorState().toJSON()) !== emptyLexicalState) {
-          editor.update(() => {
-            editor.setEditorState(editor.parseEditorState(emptyLexicalState));
-          });
+        if (typeof props.modelValue === "object") {
+          editor.setEditorState(editor.parseEditorState(JSON.stringify(props.modelValue)));
+          return;
         }
       }
+      editor.setEditorState(editor.parseEditorState(emptyLexicalState));
+    }
+
+    watch(() => props.modelValue, () => {
+      updateEditorState();
     });
 
     return {
       FORMAT_ELEMENT_COMMAND,
       FORMAT_TEXT_COMMAND,
+      variableValues,
       toolbarColors,
       menuVariable,
       UNDO_COMMAND,
@@ -684,6 +703,7 @@ export default defineComponent({
       readonly,
       linkUrl,
       classes,
+      loading,
       isEmpty,
       editor,
       isLink,

package/components/fields/FSSearchField.vue

@@ -1,14 +1,15 @@
 <template>
   <FSTextField
     class="fs-search-field"
-    :editable="$props.editable"
     :placeholder="placeholder"
-    @keydown.enter="onSearch"
-    v-model="innerValue"
+    :modelValue="$props.modelValue"
+    prependInnerIcon="mdi-magnify"
+    minWidth="200px"
+    @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
@@ -16,60 +17,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: {
@@ -77,89 +38,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
     };
   }
 });