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

package/components/fields/FSPasswordField.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, PropType, ref } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -40,7 +40,7 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -59,7 +59,7 @@ export default defineComponent({
 
     const stars = ref(true);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-password-field-cursor"   : "default",
@@ -74,7 +74,7 @@ export default defineComponent({
       };
     });
 
-    const type = computed((): string => stars.value ? "password" : "text");
+    const type = computed((): "password" | "text" => stars.value ? "password" : "text");
 
     const icon = computed((): string => stars.value ? "mdi-eye-off-outline" : "mdi-eye-outline");
 

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