@dative-gpi/foundation-shared-components 1.0.139-editablerefacto-3 → 1.0.139-richtextfield

package/components/fields/FSPasswordField.vue

@@ -1,7 +1,7 @@
 <template>
   <FSTextField
     :type="type"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -20,7 +20,7 @@
     >
       <FSButton
         variant="icon"
-        :disabled="$props.disabled"
+        :editable="$props.editable"
         :color="ColorEnum.Dark"
         :icon="icon"
         @click="onToggle"
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, type PropType, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, ref } 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
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["update:modelValue"],
@@ -69,7 +69,7 @@ export default defineComponent({
     const stars = ref(true);
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         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.disabled) {
+      if (!props.editable) {
         return;
       }
       stars.value = !stars.value;

package/components/fields/FSRichTextField.vue

@@ -30,7 +30,7 @@
         </FSRow>
       </slot>
       <FSRow
-        v-if="!$props.disabled"
+        v-if="$props.editable"
         align="center-right"
         :wrap="false"
       >
@@ -193,7 +193,7 @@
       <div
         class="fs-rich-text-field-content"
         :data-variable-values="variableValues"
-        :contenteditable="!readonly && !$props.disabled && !loading"
+        :contenteditable="!readonly && $props.editable && !loading"
         :data-readonly="$props.variant === 'readonly'"
         :id="id"
       />
@@ -204,7 +204,7 @@
     </div>
 
     <FSTextField
-      v-if="isLink && !readonly && !$props.disabled"
+      v-if="isLink && !readonly && $props.editable"
       :hideHeader="true"
       @keypress.enter.stop="toggleLink"
       v-model="linkUrl"
@@ -310,10 +310,10 @@ export default defineComponent({
       required: false,
       default: () => ({})
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["update:modelValue"],
@@ -400,7 +400,7 @@ export default defineComponent({
       }
       switch (props.variant) {
         case "standard": {
-          if (props.disabled) {
+          if (!props.editable) {
             return {
               "--fs-rich-text-field-undo-cursor"        : "default",
               "--fs-rich-text-field-icon-cursor"        : "default",
@@ -450,7 +450,7 @@ export default defineComponent({
     });
 
     const toolbarColors = computed((): { [code: string]: string } => {
-      if (!props.disabled) {
+      if (props.editable) {
         return {
           undo: canUndo.value ? darks.base : lights.base,
           bold: isBold.value ? darks.base : lights.base,
@@ -501,11 +501,11 @@ export default defineComponent({
           return;
         }
         const editorModelValue = JSON.stringify(editorState.toJSON());
-        if(editorModelValue === emptyLexicalState) {
+        if(editorModelValue === emptyLexicalState && props.modelValue !== null) {
           emit("update:modelValue", null);
           return;
         }
-        if(editorModelValue !== props.modelValue) {
+        if(editorModelValue !== emptyLexicalState && editorModelValue !== props.modelValue) {
           emit("update:modelValue", editorModelValue);
         }
       });
@@ -674,21 +674,16 @@ export default defineComponent({
         return;
       }
       if (props.modelValue != null) {
-        editor.update(() => {
-          if (typeof props.modelValue === "string") {
-            if (props.modelValue !== "") {
-              editor.setEditorState(editor.parseEditorState(props.modelValue!));
-            }
-          }
-          else {
-            editor.setEditorState(editor.parseEditorState(JSON.stringify(props.modelValue)));
-          }
-        });
-        return;
+        if (typeof props.modelValue === "string" && props.modelValue !== "") {
+          editor.setEditorState(editor.parseEditorState(props.modelValue!));
+          return;
+        }
+        if (typeof props.modelValue === "object") {
+          editor.setEditorState(editor.parseEditorState(JSON.stringify(props.modelValue)));
+          return;
+        }
       }
-      editor.update(() => {
-        editor.setEditorState(editor.parseEditorState(emptyLexicalState));
-      });
+      editor.setEditorState(editor.parseEditorState(emptyLexicalState));
     }
 
     watch(() => props.modelValue, () => {

package/components/fields/FSSelectField.vue

@@ -20,7 +20,7 @@
       :description="$props.description"
       :hideHeader="$props.hideHeader"
       :clearable="$props.clearable"
-      :disabled="$props.disabled"
+      :editable="$props.editable"
       :required="$props.required"
       :validateOn="validateOn"
       :label="$props.label"
@@ -64,7 +64,7 @@
             name="clear"
           >
             <FSButton
-              v-if="$props.clearable && !$props.disabled && !!$props.modelValue"
+              v-if="$props.clearable && $props.editable && !!$props.modelValue"
               icon="mdi-close"
               variant="icon"
               :color="ColorEnum.Dark"
@@ -79,7 +79,7 @@
         <FSButton
           icon="mdi-chevron-down"
           variant="icon"
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :color="ColorEnum.Dark"
           @click="openMobileOverlay"
         />
@@ -170,14 +170,14 @@
                 />
                 <FSCheckbox
                   v-if="$props.multiple"
-                  :disabled="$props.disabled"
+                  :editable="$props.editable"
                   :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
                   @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
                 />
                 <FSRadio
                   v-else
                   :selected="$props.modelValue === item[$props.itemValue!]"
-                  :disabled="$props.disabled"
+                  :editable="$props.editable"
                   :item="item"
                   :modelValue="item[$props.itemValue!]"
                   @update:modelValue="onRadioChange(item[$props.itemValue!])"
@@ -203,13 +203,13 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :label="$props.label"
     :messages="messages"
   >
     <FSToggleSet
       v-if="$props.toggleSet"
-      :disabled="$props.disabled"
+      :editable="$props.editable"
       :multiple="$props.multiple"
       :required="$props.required"
       :values="$props.items"
@@ -234,11 +234,10 @@
       <v-select
         class="fs-select-field"
         variant="outlined"
-        :clearable="$props.clearable && !$props.disabled && !!$props.modelValue"
+        :clearable="$props.clearable && $props.editable && !!$props.modelValue"
         :itemTitle="$props.itemTitle"
         :itemValue="$props.itemValue"
-        :disabled="$props.disabled"
-        :readonly="$props.readonly"
+        :readonly="!$props.editable"
         :multiple="$props.multiple"
         :validateOn="validateOn"
         :persistentClear="true"
@@ -348,7 +347,7 @@
               name="clear"
             >
               <FSButton
-                v-if="$props.clearable && $props.disabled && !!$props.modelValue"
+                v-if="$props.clearable && $props.editable && !!$props.modelValue"
                 icon="mdi-close"
                 variant="icon"
                 :color="ColorEnum.Dark"
@@ -366,7 +365,7 @@
             <FSButton
               icon="mdi-chevron-down"
               variant="icon"
-              :disabled="$props.disabled"
+              :editable="$props.editable"
               :color="ColorEnum.Dark"
             />
           </slot>
@@ -414,7 +413,7 @@
             <FSButton
               icon="mdi-close"
               variant="icon"
-              :disabled="$props.disabled"
+              :editable="$props.editable"
               :color="ColorEnum.Dark"
               @click="() => onCheckboxChange(item[$props.itemValue!])"
             />
@@ -529,15 +528,10 @@ export default defineComponent({
       required: false,
       default: true
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      required: false,
-      default: false
+      default: true
     },
     loading: {
       type: Boolean,
@@ -568,7 +562,7 @@ export default defineComponent({
     const dialog = ref(false);
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         return {
           "--fs-select-field-cursor"             : "default",
           "--fs-select-field-border-color"       : lights.base,
@@ -656,7 +650,7 @@ export default defineComponent({
     });
 
     const openMobileOverlay = () => {
-      if (props.disabled) {
+      if (!props.editable) {
         return;
       }
       dialog.value = true;

package/components/fields/FSTagField.vue

@@ -5,7 +5,7 @@
       :description="$props.description"
       :hideHeader="$props.hideHeader"
       :required="$props.required"
-      :disabled="$props.disabled"
+      :editable="$props.editable"
       :rules="$props.rules"
       :messages="messages"
       :validateOn="validateOn"
@@ -29,7 +29,7 @@
         <FSButton
           variant="icon"
           icon="mdi-tag-outline"
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :color="ColorEnum.Dark"
           @click="onAdd"
         />
@@ -40,7 +40,7 @@
     </FSTextField>
     <FSTagGroup
       :tagVariant="$props.tagVariant"
-      :removeDisabled="$props.disabled"
+      :editable="$props.editable"
       :tags="$props.modelValue"
       :color="$props.tagColor"
       @remove="onRemove"
@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, ref } from "vue";
 
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -108,10 +108,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["update:modelValue"],
@@ -129,7 +129,7 @@ export default defineComponent({
     const innerValue = ref("");
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         return {
           "--fs-tag-field-color": lights.dark
         };
@@ -145,7 +145,7 @@ export default defineComponent({
     const onAdd = (event: Event): void => {
       event.stopImmediatePropagation();
       event.preventDefault();
-      if (props.disabled) {
+      if (!props.editable) {
         return;
       }
       const tags = props.modelValue ?? [];
@@ -157,7 +157,7 @@ export default defineComponent({
     }
 
     const onRemove = (label: string): void => {
-      if (props.disabled) {
+      if (!props.editable) {
         return;
       }
       const tags = props.modelValue ?? [];

package/components/fields/FSTermField.vue

@@ -3,7 +3,7 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :label="$props.label"
     :messages="messages"
   >
@@ -16,7 +16,7 @@
         <FSSelectDateSetting
           minWidth="180px"
           :lastPeriod="$props.lastPeriod"
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :variant="$props.variant"
           :hideHeader="true"
           :modelValue="innerDateSetting"
@@ -26,7 +26,7 @@
           minWidth="60px"
           v-if="pastSettings.includes(innerDateSetting)"
           :rules="[NumberRules.required(), NumberRules.min(0)]"
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :hideHeader="true"
           :clearable="false"
           :modelValue="innerDateValue"
@@ -44,7 +44,7 @@
             </FSIcon>
             <FSTextField
               :rules="[TextRules.required(), DateRules.validateExpression($props.variant)]"
-              :disabled="$props.disabled"
+              :editable="$props.editable"
               :hideHeader="true"
               :clearable="false"
               :modelValue="innerStartDate"
@@ -60,7 +60,7 @@
             </FSIcon>
             <FSTextField
               :rules="[TextRules.required(), DateRules.validateExpression($props.variant)]"
-              :disabled="$props.disabled"
+              :editable="$props.editable"
               :hideHeader="true"
               :clearable="false"
               :modelValue="innerEndDate"
@@ -72,7 +72,7 @@
           v-else-if="innerDateSetting === DateSetting.Pick"
           :width="['350px', '310px']"
           :rules="[DateRules.required()]"
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :hideHeader="true"
           :clearable="false"
           :modelValue="actualValue"
@@ -162,10 +162,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["update", "update:startDate", "update:endDate"],

package/components/fields/FSTextArea.vue

@@ -4,7 +4,7 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :messages="messages"
   >
     <template
@@ -26,8 +26,8 @@
       :hideDetails="true"
       :noResize="true"
       :autoGrow="$props.autoGrow"
-      :disabled="$props.disabled"
-      :clearable="$props.clearable && !$props.disabled && !!$props.modelValue"
+      :readonly="!$props.editable"
+      :clearable="$props.clearable && $props.editable && !!$props.modelValue"
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
@@ -50,7 +50,7 @@
           align="center-center"
         >
           <FSButton
-            v-if="$props.clearable && !$props.disabled && !!$props.modelValue"
+            v-if="$props.clearable && $props.editable && !!$props.modelValue"
             icon="mdi-close"
             variant="icon"
             :color="ColorEnum.Dark"
@@ -128,10 +128,10 @@ export default defineComponent({
       required: false,
       default: true
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["update:modelValue"],
@@ -161,7 +161,7 @@ export default defineComponent({
         }
         fieldHeight = `${props.rows * row}px`;
       }
-      if (props.disabled) {
+      if (!props.editable) {
         return {
           "--fs-text-area-cursor"             : "default",
           "--fs-text-area-border-color"       : lights.base,

package/components/fields/FSTextField.vue

@@ -4,7 +4,7 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :messages="messages"
   >
     <template
@@ -32,8 +32,8 @@
       :type="$props.type"
       :persistentClear="true"
       :hideDetails="true"
-      :disabled="$props.disabled"
-      :clearable="$props.clearable && !$props.disabled && !!$props.modelValue"
+      :readonly="!$props.editable"
+      :clearable="$props.clearable && $props.editable && !!$props.modelValue"
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
@@ -56,7 +56,7 @@
           name="clear"
         >
           <FSButton
-            v-if="$props.clearable && !$props.disabled && !!$props.modelValue"
+            v-if="$props.clearable && $props.editable && !!$props.modelValue"
             icon="mdi-close"
             variant="icon"
             :color="ColorEnum.Dark"
@@ -129,10 +129,10 @@ export default defineComponent({
       required: false,
       default: true
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["update:modelValue"],
@@ -150,7 +150,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         return {
           "--fs-text-field-cursor"             : "default",
           "--fs-text-field-border-color"       : lights.base,

package/components/fields/FSTimeField.vue

@@ -3,14 +3,14 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :label="$props.label"
     :messages="messages"
   >
     <FSRow>
       <FSNumberField
         :validationValue="$props.modelValue"
-        :disabled="$props.disabled"
+        :editable="$props.editable"
         :validateOn="validateOn"
         :rules="$props.rules"
         :hideHeader="true"
@@ -31,7 +31,7 @@
       </FSNumberField>
       <FSSelectField
         class="fs-time-field-select"
-        :disabled="$props.disabled"
+        :editable="$props.editable"
         :hideHeader="true"
         :clearable="false"
         :items="timeScale"
@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { getTimeScaleIndex, timeScale } from "@dative-gpi/foundation-shared-components/utils";
@@ -108,10 +108,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["update:modelValue"],
@@ -131,7 +131,7 @@ export default defineComponent({
     const selectedUnit = ref(timeScale[0]);
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         return {
           "--fs-time-field-cursor"             : "default",
           "--fs-time-field-border-color"       : lights.base,
@@ -153,14 +153,14 @@ export default defineComponent({
       return Object.keys(slots).filter(k => k.startsWith("number-")).reduce((acc, key) => {
         acc[key.substring("number-".length)] = slots[key];
         return acc;
-      }, {} as Record<string, any>);
+      }, {});
     });
 
     const selectSlots = computed((): any => {
       return Object.keys(slots).filter(k => k.startsWith("select-")).reduce((acc, key) => {
         acc[key.substring("select-".length)] = slots[key];
         return acc;
-      }, {} as Record<string, any>);
+      }, {});
     });
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
@@ -171,11 +171,7 @@ export default defineComponent({
     };
 
     const onSubmitTimeScale = (value: number): void => {
-      const newUnit = timeScale.find((item) => item.id === value);
-      if(!newUnit) {
-        return;
-      }
-      selectedUnit.value = newUnit;
+      selectedUnit.value = timeScale.find((item) => item.id === value);
       emit("update:modelValue", innerTime.value * selectedUnit.value.id);
     };
 

package/components/fields/FSTimeRangeField.vue

@@ -3,7 +3,7 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :label="$props.label"
     :messages="messages"
   >
@@ -13,7 +13,7 @@
       >
         <FSSelectField
           :validationValue="$props.modelValue"
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :validateOn="validateOn"
           :rules="$props.rules"
           :items="daysItems"
@@ -23,7 +23,7 @@
           @update:modelValue="onChangeDayStart"
         />
         <FSClock
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :color="ColorEnum.Light"
           :slider="false"
           :modelValue="startTime"
@@ -34,7 +34,7 @@
         :wrap="false"
       >
         <FSSelectField
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :items="daysItems"
           :hideHeader="true"
           :clearable="false"
@@ -42,7 +42,7 @@
           @update:modelValue="onChangeDayEnd"
         />
         <FSClock
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :color="ColorEnum.Light"
           :slider="false"
           :modelValue="endTime"
@@ -123,10 +123,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     showVariant: {
       type: Boolean,