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

package/components/buttons/FSButtonFileLabel.vue

@@ -46,19 +46,26 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { read } = useFiles();
-    
-    const input = ref(null);
+
+    const input = ref<HTMLFormElement | null>(null);
 
     const clear = () => {
-      input.value!.form && input.value!.form.reset();
+      if (input.value) {
+        input.value.form && input.value.form.reset();
+      }
     };
 
     const onClick = () => {
-      input.value!.click();
+      if (input.value) {
+        input.value.click();
+      }
     }
 
     const onInput = () => {
-      const file = input.value!.files && input.value!.files[0];
+      if (!input.value) {
+        return;
+      }
+      const file = input.value.files && input.value.files[0];
       if (!file) {
         return;
       }

package/components/buttons/FSButtonFileMini.vue

@@ -46,19 +46,26 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { read } = useFiles();
-    
-    const input = ref(null);
+
+    const input = ref<HTMLFormElement | null>(null);
 
     const clear = () => {
-      input.value!.form && input.value!.form.reset();
+      if (input.value) {
+        input.value.form && input.value.form.reset();
+      }
     };
 
     const onClick = () => {
-      input.value!.click();
+      if (input.value) {
+        input.value.click();
+      }
     }
 
     const onInput = () => {
-      const file = input.value!.files && input.value!.files[0];
+      if (!input.value) {
+        return;
+      }
+      const file = input.value.files && input.value.files[0];
       if (!file) {
         return;
       }

package/components/deviceOrganisations/FSStatusesCarousel.vue

@@ -79,9 +79,8 @@ export default defineComponent({
       if (modelStatus.showDefault) {
         return [{
           label: modelStatus.label,
-          value: null,
-          icon: modelStatus.iconDefault,
-          color: modelStatus.colorDefault
+          icon: modelStatus.iconDefault!,
+          color: modelStatus.colorDefault!
         }];
       }
       return [];

package/components/deviceOrganisations/FSStatusesRow.vue

@@ -50,9 +50,8 @@ export default defineComponent({
       if (modelStatus.showDefault) {
         return [{
           label: modelStatus.label,
-          value: null,
-          icon: modelStatus.iconDefault,
-          color: modelStatus.colorDefault
+          icon: modelStatus.iconDefault!,
+          color: modelStatus.colorDefault!
         }];
       }
       return [];

package/components/fields/FSAutocompleteField.vue

@@ -90,12 +90,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
     },
@@ -114,7 +114,7 @@ export default defineComponent({
       default: "label"
     },
     modelValue: {
-      type: [Array, String] as PropType<string[] | string>,
+      type: [Array, String] as PropType<string[] | string | null>,
       required: false,
       default: null
     },
@@ -139,7 +139,7 @@ export default defineComponent({
       default: false
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -169,7 +169,7 @@ export default defineComponent({
 
     const innerSearch = ref("");
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-autocomplete-field-cursor"             : "default",

package/components/fields/FSColorField.vue

@@ -101,7 +101,7 @@
 </template>
   
 <script lang="ts">
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, PropType, ref } from "vue";
 
 import { getPercentageFromHex, getHexFromPercentage } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
@@ -126,7 +126,7 @@ export default defineComponent({
   },
   props: {
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -176,7 +176,7 @@ export default defineComponent({
     const innerOpacity = ref(getHexFromPercentage(props.opacityValue));
     const fullColor = ref(innerColor.value + innerOpacity.value);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-color-field-color": lights.dark

package/components/fields/FSDateField.vue

@@ -39,6 +39,7 @@
       </FSTextField>
     </template>
     <FSCard
+      padding="8px"
       width="346px"
       :elevation="true"
       :border="false"
@@ -49,7 +50,7 @@
           v-model="innerDate"
         />
         <FSButton
-          :fullWidth="true"
+          width="100%"
           :color="$props.color"
           :label="$tr('ui.date-menu.validate', 'Validate')"
           @click="onSubmit"
@@ -83,17 +84,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
     },
@@ -113,7 +114,7 @@ export default defineComponent({
       default: false
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -134,9 +135,9 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const menu = ref(false);
-    const innerDate = ref(props.modelValue);
+    const innerDate = ref<number | null>(props.modelValue);
 
-    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/FSDateRangeField.vue

@@ -68,17 +68,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
     },
@@ -98,7 +98,7 @@ export default defineComponent({
       default: false
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -119,9 +119,9 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const dialog = ref(false);
-    const innerDateRange = ref(props.modelValue);
+    const innerDateRange = ref<number[] | null>(props.modelValue);
 
-    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/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"
@@ -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: () => []
     },
@@ -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"
@@ -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: () => []
     },
@@ -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");