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

package/components/fields/FSDateTimeField.vue

@@ -42,6 +42,7 @@
       :modelValue="tabs"
     >
       <FSCard
+        padding="8px"
         width="346px"
         :elevation="true"
         :border="false"
@@ -53,7 +54,7 @@
             v-model="innerDate"
           />
           <FSButton
-            :fullWidth="true"
+            width="100%"
             :color="$props.color"
             :label="$tr('ui.date-menu.validate', 'Validate')"
             @click="tabs++"
@@ -61,6 +62,7 @@
         </FSCol>
       </FSCard>
       <FSCard
+        padding="8px"
         width="394px"
         :elevation="true"
         :border="false"
@@ -72,7 +74,7 @@
             v-model="innerTime"
           />
           <FSButton
-            :fullWidth="true"
+            width="100%"
             :color="$props.color"
             :label="$tr('ui.date-menu.validate', 'Validate')"
             @click="onSubmit"
@@ -88,7 +90,7 @@ import { computed, defineComponent, PropType, ref, watch } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSTextField from "./FSTextField.vue";
 import FSCalendar from "../FSCalendar.vue";
@@ -111,17 +113,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
     },
@@ -141,7 +143,7 @@ export default defineComponent({
       default: false
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -153,7 +155,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { getUserOffsetMillis, epochToLongTimeFormat } = useTimeZone();
+    const { getUserOffsetMillis, epochToLongTimeFormat } = useAppTimeZone();
     const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
 
@@ -163,17 +165,17 @@ export default defineComponent({
 
     const menu = ref(false);
     const tabs = ref(0);
-
-    // FSClock just gives two numbers without consideration for the time zone
-    // We must adjust the time to the user's time zone
+    const innerDate = ref<number | null>(null);
     const innerTime = ref(0);
-    const innerDate = ref(null);
+
     if (props.modelValue) {
+      // FSClock just gives two numbers without consideration for the time zone
+      // We must adjust the time to the user's time zone
       innerTime.value = Math.floor((props.modelValue + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
       innerDate.value = props.modelValue - innerTime.value;
     }
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-date-field-color": lights.dark
@@ -194,7 +196,7 @@ export default defineComponent({
     };
 
     const onSubmit = (): void => {
-      emit("update:modelValue", innerDate.value + innerTime.value);
+      emit("update:modelValue", (innerDate.value ?? 0) + innerTime.value);
       menu.value = false;
     };
 

package/components/fields/FSDateTimeRangeField.vue

@@ -50,7 +50,6 @@
             width="calc(50% - 4px)"
           >
             <FSClock
-              :reminder="true"
               :color="$props.color"
               :date="innerDateLeft"
               v-model="innerTimeLeft"
@@ -60,7 +59,6 @@
             width="calc(50% - 4px)"
           >
             <FSClock
-              :reminder="true"
               :color="$props.color"
               :date="innerDateRight"
               v-model="innerTimeRight"
@@ -77,7 +75,7 @@ import { computed, defineComponent, PropType, ref } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSSubmitDialog from "../FSSubmitDialog.vue";
 import FSCalendarTwin from "../FSCalendarTwin.vue";
@@ -100,17 +98,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: false,
       default: null
     },
@@ -130,7 +128,7 @@ export default defineComponent({
       default: false
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -142,7 +140,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { getUserOffsetMillis, epochToShortTimeFormat } = useTimeZone();
+    const { getUserOffsetMillis, epochToShortTimeFormat } = useAppTimeZone();
     const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
 
@@ -151,13 +149,13 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const dialog = ref(false);
-
-    // FSClock just gives two numbers without consideration for the time zone
-    // We must adjust the time to the user's time zone
-    const innerTimeLeft = ref(0);
+    const innerDateRange = ref<number[] | null>(null);
     const innerTimeRight = ref(0);
-    const innerDateRange = ref(null);
+    const innerTimeLeft = ref(0);
+
     if (props.modelValue && Array.isArray(props.modelValue)) {
+      // FSClock just gives two numbers without consideration for the time zone
+      // We must adjust the time to the user's time zone
       switch (props.modelValue.length) {
         case 0: {
           break;
@@ -174,7 +172,7 @@ export default defineComponent({
       }
     }
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-date-field-color": lights.dark

package/components/fields/FSIconField.vue

@@ -61,12 +61,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
     },
@@ -86,7 +86,7 @@ export default defineComponent({
       default: "standard"
     },
     modelValue: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -111,7 +111,7 @@ export default defineComponent({
       default: false
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -130,10 +130,10 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const toggleSetRef = ref(null);
-    const innerValue = ref(null);
+    const toggleSetRef = ref<HTMLElement | null>(null);
+    const innerValue = ref<string | null>(null);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-icon-field-color": lights.dark
@@ -163,8 +163,8 @@ export default defineComponent({
       }
       else {
         const matchingIcons = Icons.filter((icon) => {
-          return icon.fullText.toLowerCase().includes(innerValue.value.toLowerCase());
-        }).sort((a, b) => sortByLevenshteinDistance(a.name, b.name, innerValue.value));
+          return icon.fullText.toLowerCase().includes(innerValue.value!.toLowerCase());
+        }).sort((a, b) => sortByLevenshteinDistance(a.name, b.name, innerValue.value!));
         innerIcons.push(...matchingIcons.slice(0, Math.min(32, matchingIcons.length)).map((icon) => ({
           id: icon.name,
           prependIcon: icon.name
@@ -190,7 +190,7 @@ export default defineComponent({
 
     watch(() => props.modelValue, () => {
       if (toggleSetRef.value) {
-        toggleSetRef.value.goToStart();
+        (toggleSetRef.value as any).goToStart();
       }
     });
 

package/components/fields/FSNumberField.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import FSTextField from "./FSTextField.vue";
 
@@ -23,7 +23,7 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: Number,
+      type: Number as PropType<number | null>,
       required: false,
       default: null
     },

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",