@dative-gpi/foundation-shared-components 0.0.50 → 0.0.51

package/components/fields/FSRichTextField.vue

@@ -29,7 +29,7 @@
           class="fs-rich-text-field-icon"
           :color="toolbarColors.undo"
           :style="style"
-          @click="editor.dispatchCommand(UNDO_COMMAND)"
+          @click="editor.dispatchCommand(UNDO_COMMAND, undefined)"
         >
           mdi-undo-variant
         </FSIcon>
@@ -186,17 +186,17 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     modelValue: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -284,7 +284,7 @@ export default defineComponent({
 
       if (props.modelValue != null) {
         editor.update((): void => {
-          editor.setEditorState(editor.parseEditorState(props.modelValue));
+          editor.setEditorState(editor.parseEditorState(props.modelValue!));
         });
       }
       else {
@@ -298,7 +298,7 @@ export default defineComponent({
       return ["readonly"].includes(props.variant);
     });
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       let minHeight: string | undefined = "auto";
       if (!readonly.value) {
         const base = isMobileSized.value ? 30 : 42;
@@ -440,106 +440,96 @@ export default defineComponent({
         const selection = $getSelection();
         $setSelection(null);
 
-        const nodes = selection.extract();
+        if (selection != null) {
+          const nodes = selection.extract();
 
-        if (linkUrl.value === null) {
-          // Remove LinkNodes
-          nodes.forEach((node) => {
-            const parent = node.getParent();
-
-            if ($isLinkNode(parent)) {
-              const children = parent.getChildren();
-
-              for (let i = 0; i < children.length; i++) {
-                parent.insertBefore(children[i]);
-              }
-
-              parent.remove();
-            }
-          });
-        }
-        else {
-          if (nodes.length === 1) {
-            const firstNode = nodes[0];
-            const linkNode = getAncestor(firstNode, $isLinkNode);
-
-            if (linkNode !== null) {
-              linkNode.setURL(linkUrl.value);
-              if (target !== undefined) {
-                linkNode.setTarget(target);
-              }
-              if (rel !== null) {
-                linkNode.setRel(rel);
-              }
-              if (title !== undefined) {
-                linkNode.setTitle(title);
+          if (linkUrl.value === null) {
+            // Remove LinkNodes
+            nodes.forEach((node) => {
+              const parent = node.getParent();
+              if ($isLinkNode(parent)) {
+                const children = parent.getChildren();
+                for (let i = 0; i < children.length; i++) {
+                  parent.insertBefore(children[i]);
+                }
+                parent.remove();
               }
-              return;
-            }
+            });
           }
-
-          let prevParent: ElementNode | LinkNode | null = null;
-          let linkNode: LinkNode | null = null;
-
-          nodes.forEach((node) => {
-            const parent = node.getParent();
-
-            if ( parent === linkNode || parent === null || ($isElementNode(node) && !node.isInline())) {
-              return;
-            }
-
-            if ($isLinkNode(parent)) {
-              linkNode = parent;
-              parent.setURL(linkUrl.value);
-              if (target !== undefined) {
-                parent.setTarget(target);
-              }
-              if (rel !== null) {
-                linkNode.setRel(rel);
-              }
-              if (title !== undefined) {
-                linkNode.setTitle(title);
+          else {
+            if (nodes.length === 1) {
+              const firstNode = nodes[0];
+              const linkNode = getAncestor(firstNode, $isLinkNode);
+              if (linkNode !== null) {
+                linkNode.setURL(linkUrl.value);
+                if (target !== undefined) {
+                  linkNode.setTarget(target);
+                }
+                if (rel !== null) {
+                  linkNode.setRel(rel);
+                }
+                if (title !== undefined) {
+                  linkNode.setTitle(title);
+                }
+                return;
               }
-              return;
             }
-
-            if (!parent.is(prevParent)) {
-              prevParent = parent;
-              linkNode = $createLinkNode(linkUrl.value, {rel, target, title});
-
+            let prevParent: ElementNode | LinkNode | null = null;
+            let linkNode: LinkNode | null = null;
+            nodes.forEach((node) => {
+              const parent = node.getParent();
+              if ( parent === linkNode || parent === null || ($isElementNode(node) && !node.isInline())) {
+                return;
+              }
               if ($isLinkNode(parent)) {
-                if (node.getPreviousSibling() === null) {
-                  parent.insertBefore(linkNode);
+                linkNode = parent;
+                parent.setURL(linkUrl.value);
+                if (target !== undefined) {
+                  parent.setTarget(target);
                 }
-                else {
-                  parent.insertAfter(linkNode);
+                if (rel !== null) {
+                  linkNode.setRel(rel);
+                }
+                if (title !== undefined) {
+                  linkNode.setTitle(title);
                 }
+                return;
               }
-              else {
-                node.insertBefore(linkNode);
+              if (!parent.is(prevParent)) {
+                prevParent = parent;
+                linkNode = $createLinkNode(linkUrl.value, {rel, target, title});
+
+                if ($isLinkNode(parent)) {
+                  if (node.getPreviousSibling() === null) {
+                    parent.insertBefore(linkNode);
+                  }
+                  else {
+                    parent.insertAfter(linkNode);
+                  }
+                }
+                else {
+                  node.insertBefore(linkNode);
+                }
               }
-            }
+              if ($isLinkNode(node)) {
+                if (node.is(linkNode)) {
+                  return;
+                }
+                if (linkNode !== null) {
+                  const children = node.getChildren();
 
-            if ($isLinkNode(node)) {
-              if (node.is(linkNode)) {
+                  for (let i = 0; i < children.length; i++) {
+                    linkNode.append(children[i]);
+                  }
+                }
+                node.remove();
                 return;
               }
               if (linkNode !== null) {
-                const children = node.getChildren();
-
-                for (let i = 0; i < children.length; i++) {
-                  linkNode.append(children[i]);
-                }
+                linkNode.append(node);
               }
-
-              node.remove();
-              return;
-            }
-
-            if (linkNode !== null) {
-              linkNode.append(node);
-            }
-          });
+            });
+          }
         }
       });
       isLink.value = false;
@@ -549,7 +539,7 @@ export default defineComponent({
       if (JSON.stringify(editor.getEditorState().toJSON()) != props.modelValue) {
         if (props.modelValue != null) {
           editor.update(() => {
-            editor.setEditorState(editor.parseEditorState(props.modelValue));
+            editor.setEditorState(editor.parseEditorState(props.modelValue!));
           });
         }
         else if (JSON.stringify(editor.getEditorState().toJSON()) !== emptyState) {

package/components/fields/FSSearchField.vue

@@ -58,22 +58,22 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     placeholder: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     prependInnerIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: "mdi-magnify"
     },
@@ -83,17 +83,17 @@ export default defineComponent({
       default: "instant"
     },
     buttonPrependIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     buttonLabel: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     buttonAppendIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -103,7 +103,7 @@ export default defineComponent({
       default: "standard"
     },
     modelValue: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },

package/components/fields/FSSelectField.vue

@@ -42,7 +42,7 @@
       :itemTitle="$props.itemTitle"
       :itemValue="$props.itemValue"
       :readonly="!$props.editable"
-      :clearable="$props.editable && $props.clearable"
+      :clearable="$props.editable && !!$props.modelValue"
       :returnObject="$props.returnObject"
       :rules="$props.rules"
       :validateOn="validateOn"
@@ -87,12 +87,12 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -111,7 +111,7 @@ export default defineComponent({
       default: "label"
     },
     modelValue: {
-      type: [Array, String, Number] as PropType<(string | number)[] | string | number>,
+      type: [Array, String, Number] as PropType<(string | number)[] | string | number | null>,
       required: false,
       default: null
     },
@@ -131,7 +131,7 @@ export default defineComponent({
       default: false
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -159,7 +159,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-select-field-cursor"             : "default",

package/components/fields/FSTagField.vue

@@ -65,12 +65,12 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -100,7 +100,7 @@ export default defineComponent({
       default: false
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -121,7 +121,7 @@ export default defineComponent({
 
     const innerValue = ref("");
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-tag-field-color": lights.dark

package/components/fields/FSTextArea.vue

@@ -87,17 +87,17 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     modelValue: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -127,7 +127,7 @@ export default defineComponent({
       default: false
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -152,7 +152,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       let height: string | undefined = undefined;
       let minHeight: string | undefined = undefined;
       if (!props.autoGrow) {

package/components/fields/FSTextField.vue

@@ -86,12 +86,12 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -101,7 +101,7 @@ export default defineComponent({
       default: "text"
     },
     modelValue: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -116,7 +116,7 @@ export default defineComponent({
       default: false
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -144,7 +144,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-text-field-cursor"             : "default",

package/components/fields/FSTimeField.vue

@@ -94,17 +94,17 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     modelValue: {
-      type: Number,
+      type: Number as PropType<number | null>,
       required: false,
       default: null
     },
@@ -119,7 +119,7 @@ export default defineComponent({
       default: false
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -147,15 +147,20 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
     
-    const innerTime = ref(props.modelValue);
+    const innerTime = ref(0);
     const selectedUnit = ref(timeScale[0]);
 
-    if (getTimeScaleIndex(props.modelValue) !== 0) {
-      selectedUnit.value = timeScale[getTimeScaleIndex(props.modelValue)];
-      innerTime.value = props.modelValue / selectedUnit.value.id;
+    if (props.modelValue) {
+      if (getTimeScaleIndex(props.modelValue) !== 0) {
+        selectedUnit.value = timeScale[getTimeScaleIndex(props.modelValue)];
+        innerTime.value = props.modelValue / selectedUnit.value.id;
+      }
+      else {
+        innerTime.value = props.modelValue;
+      }
     }
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-time-field-cursor"             : "default",
@@ -193,6 +198,7 @@ export default defineComponent({
       timeScale,
       messages,
       blurred,
+      slots,
       style,
       onSubmitTimeScale,
       onSubmitValue

package/components/fields/FSTimeSlotField.vue

@@ -56,7 +56,6 @@
           class="fs-time-slot-field-number"
           :editable="$props.editable"
           :color="ColorEnum.Light"
-          :reminder="false"
           :slider="false"
           :style="style"
           :modelValue="$props.modelValue[0][1]"
@@ -80,7 +79,6 @@
           class="fs-time-slot-field-number"
           :editable="$props.editable"
           :color="ColorEnum.Light"
-          :reminder="false"
           :slider="false"
           :style="style"
           :modelValue="$props.modelValue[1][1]"
@@ -125,17 +123,17 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     modelValue: {
-      type: Array as PropType<number[][]>,
+      type: Array as PropType<number[][] | null>,
       required: true,
       default: null
     },
@@ -150,7 +148,7 @@ export default defineComponent({
       default: false
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -179,16 +177,16 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
     
     const daysObject: { id: number; label: string }[]  = Object.keys(Days).reduce((acc, key) => {
-      if(isNaN(Number(key))){
+      if (isNaN(Number(key))) {
         acc.push({
           id: Days[key],
           label: key
         });
       }
       return acc;
-    }, []);
+    }, [] as { id: number, label: string }[]);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-time-slot-field-cursor"             : "default",
@@ -208,45 +206,75 @@ export default defineComponent({
     });
 
     const dayStart = computed((): number => {
-      return props.modelValue[1][0] === 7 ? 7 : props.modelValue[0][0];
+      if (props.modelValue) {
+        return props.modelValue[1][0] === 7 ? 7 : props.modelValue[0][0];
+      }
+      return 0;
     });
 
     const dayEnd = computed((): number => {
-      return props.modelValue[0][0] === 7 ? 7 : props.modelValue[1][0];
+      if (props.modelValue) {
+        return props.modelValue[0][0] === 7 ? 7 : props.modelValue[1][0];
+      }
+      return 0;
     });
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     const onChangeDayStart = (value: number) => {
       if (value === 7) {
-        emit("update:modelValue", [[7, props.modelValue[0][1]], [7, props.modelValue[1][1]]]);
+        if (props.modelValue) {
+          emit("update:modelValue", [[7, props.modelValue[0][1]], [7, props.modelValue[1][1]]]);
+          return;
+        }
+        emit("update:modelValue", [[7, 0], [7, 0]]);
         return;
       }
-      if (props.modelValue[1][0] === 7) {
-        emit("update:modelValue", [[value, props.modelValue[0][1]], [value, props.modelValue[1][1]]]);
+      if (props.modelValue) {
+        if (props.modelValue[1][0] === 7) {
+          emit("update:modelValue", [[value, props.modelValue[0][1]], [value, props.modelValue[1][1]]]);
+          return;
+        }
+        emit("update:modelValue", [[value, props.modelValue[0][1]], props.modelValue[1]]);
         return;
       }
-      emit("update:modelValue", [[value, props.modelValue[0][1]], props.modelValue[1]]);
+      emit("update:modelValue", [[value, 0], [value, 0]]);
     };
 
     const onChangeHourStart = (value: number) => {
-      emit("update:modelValue", [[props.modelValue[0][0], value], props.modelValue[1]]);
+      if (props.modelValue) {
+        emit("update:modelValue", [[props.modelValue[0][0], value], props.modelValue[1]]);
+        return;
+      }
+      emit("update:modelValue", [[0, value], [0, 0]]);
     };
 
     const onChangeDayEnd = (value: number) => {
       if (value === 7) {
-        emit("update:modelValue", [[7, props.modelValue[0][1]], [7, props.modelValue[1][1]]]);
+        if (props.modelValue) {
+          emit("update:modelValue", [[7, props.modelValue[0][1]], [7, props.modelValue[1][1]]]);
+          return;
+        }
+        emit("update:modelValue", [[7, 0], [7, 0]]);
         return;
       }
-      if (props.modelValue[0][0] === 7) {
-        emit("update:modelValue", [[value, props.modelValue[0][1]], [value, props.modelValue[1][1]]]);
+      if (props.modelValue) {
+        if (props.modelValue[0][0] === 7) {
+          emit("update:modelValue", [[value, props.modelValue[0][1]], [value, props.modelValue[1][1]]]);
+          return;
+        }
+        emit("update:modelValue", [props.modelValue[0], [value, props.modelValue[1][1]]]);
         return;
       }
-      emit("update:modelValue", [props.modelValue[0], [value, props.modelValue[1][1]]]);
+      emit("update:modelValue", [[value, 0], [value, 0]]);
     };
 
     const onChangeHourEnd = (value: number) => {
-      emit("update:modelValue", [props.modelValue[0], [props.modelValue[1][0], value]]);
+      if (props.modelValue) {
+        emit("update:modelValue", [props.modelValue[0], [props.modelValue[1][0], value]]);
+        return;
+      }
+      emit("update:modelValue", [[0, 0], [0, value]]);
     };
 
     return {