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

package/components/FSTab.vue

@@ -50,22 +50,22 @@ export default defineComponent({
   },
   props: {
     prependIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     tag: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     appendIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },

package/components/FSTabs.vue

@@ -11,7 +11,7 @@
     v-bind="$attrs"
   >
     <template
-      v-for="(component, index) in getChildren()"
+      v-for="(component, index) in getChildren(undefined)"
       :key="index"
     >
       <component :is="component" />
@@ -46,7 +46,7 @@ export default defineComponent({
     const colors = computed(() => getColors(props.color));
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
+    const style = computed((): { [key: string] : string | undefined } => ({
       "--fs-group-color"                 : darks.base,
       "--fs-group-disabled-color"        : darks.light,
       "--fs-group-hover-background-color": colors.value.light,

package/components/FSTag.vue

@@ -51,7 +51,7 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -77,7 +77,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       switch (props.variant) {
         case "standard": return {
           "--fs-tag-background-color"       : colors.value.light,

package/components/FSText.vue

@@ -70,7 +70,7 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       switch (props.variant) {
         case "base": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),

package/components/FSToggleSet.vue

@@ -133,9 +133,9 @@ export default defineComponent({
       default: null
     },
     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: false
+      default: null
     },
     buttonColor: {
       type: String as PropType<ColorBase>,
@@ -277,13 +277,13 @@ export default defineComponent({
 
     const goToStart = () => {
       if (toggleSetRef.value) {
-        toggleSetRef.value.goToStart();
+        (toggleSetRef.value as any).goToStart();
       }
     };
 
     const goToEnd = () => {
       if (toggleSetRef.value) {
-        toggleSetRef.value.goToEnd();
+        (toggleSetRef.value as any).goToEnd();
       }
     };
 

package/components/FSWindow.vue

@@ -4,7 +4,7 @@
     v-bind="$attrs"
   >
     <v-window-item
-      v-for="(component, index) in getChildren()"
+      v-for="(component, index) in getChildren(undefined)"
       :value="value(component, index)"
       :key="index"
     >

package/components/FSWrapGroup.vue

@@ -6,7 +6,7 @@
     v-bind="$attrs"
   >
     <v-slide-group-item
-      v-for="(component, index) in getChildren()"
+      v-for="(component, index) in getChildren(undefined)"
       :key="index"
     >
       <component :is="component" />
@@ -43,7 +43,7 @@ export default defineComponent({
 
     const wrapGroupRef = ref(null);
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
+    const style = computed((): { [key: string] : string | undefined } => ({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
       "--fs-group-color"      : darks.light,

package/components/buttons/FSButtonFile.vue

@@ -22,6 +22,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
+import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -44,19 +45,28 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
-    const input = ref(null);
+  setup(props, { emit }) {
+    const { read } = useFiles();
+    
+    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;
       }
@@ -65,12 +75,9 @@ export default defineComponent({
         clear();
       }
       else {
-        const reader = new FileReader();
-        reader.addEventListener("load", (fileEv) => {
-          emit("update:modelValue", fileEv.target && fileEv.target.result);
-          clear();
+        read(file, (content: string) => {
+          emit("update:modelValue", content);
         });
-        reader.readAsDataURL(file);
       }
     };
 

package/components/buttons/FSButtonFileIcon.vue

@@ -22,6 +22,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
+import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -44,19 +45,28 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
-    const input = ref(null);
+  setup(props, { emit }) {
+    const { read } = useFiles();
+
+    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;
       }
@@ -65,12 +75,9 @@ export default defineComponent({
         clear();
       }
       else {
-        const reader = new FileReader();
-        reader.addEventListener("load", (fileEv) => {
-          emit("update:modelValue", fileEv.target && fileEv.target.result);
-          clear();
+        read(file, (content: string) => {
+          emit("update:modelValue", content);
         });
-        reader.readAsDataURL(file);
       }
     };
 

package/components/buttons/FSButtonFileLabel.vue

@@ -21,6 +21,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
+import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -43,19 +44,28 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
-    const input = ref(null);
+  setup(props, { emit }) {
+    const { read } = useFiles();
+
+    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;
       }
@@ -64,12 +74,9 @@ export default defineComponent({
         clear();
       }
       else {
-        const reader = new FileReader();
-        reader.addEventListener("load", (fileEv) => {
-          emit("update:modelValue", fileEv.target && fileEv.target.result);
-          clear();
+        read(file, (content: string) => {
+          emit("update:modelValue", content);
         });
-        reader.readAsDataURL(file);
       }
     };
 

package/components/buttons/FSButtonFileMini.vue

@@ -21,6 +21,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
+import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -43,19 +44,28 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
-    const input = ref(null);
+  setup(props, { emit }) {
+    const { read } = useFiles();
+
+    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;
       }
@@ -64,12 +74,9 @@ export default defineComponent({
         clear();
       }
       else {
-        const reader = new FileReader();
-        reader.addEventListener("load", (fileEv) => {
-          emit("update:modelValue", fileEv.target && fileEv.target.result);
-          clear();
+        read(file, (content: string) => {
+          emit("update:modelValue", content);
         });
-        reader.readAsDataURL(file);
       }
     };
 

package/components/deviceOrganisations/FSConnectivityCard.vue

@@ -44,7 +44,7 @@ import { computed, defineComponent, PropType } from "vue";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
@@ -70,7 +70,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { epochToLongTimeFormat } = useTimeZone();
+    const { epochToLongTimeFormat } = useAppTimeZone();
     const { $tr } = useTranslationsProvider();
 
     const connectivityLabel = computed((): string => {

package/components/deviceOrganisations/FSStatusCard.vue

@@ -54,7 +54,7 @@
 import { computed, defineComponent, PropType } from "vue";
 
 import { FSDeviceStatusGroup, FSModelStatus } 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 FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
@@ -84,7 +84,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { epochToLongTimeFormat } = useTimeZone();
+    const { epochToLongTimeFormat } = useAppTimeZone();
 
     const deviceTimestamp = computed((): string => {
       if (props.statusGroup.sourceTimestamp) {

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/deviceOrganisations/FSWorstAlertCard.vue

@@ -43,7 +43,7 @@ import { computed, defineComponent, PropType, ref } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 import { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
@@ -71,7 +71,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { epochToLongTimeFormat } = useTimeZone();
+    const { epochToLongTimeFormat } = useAppTimeZone();
     const { $tr } = useTranslationsProvider();
 
     const criticityColor = computed(() => {

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"
@@ -64,7 +65,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 FSTextField from "./FSTextField.vue";
 import FSCalendar from "../FSCalendar.vue";
@@ -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: () => []
     },
@@ -126,7 +127,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const {validateOn, blurred, getMessages} = useRules();
-    const { epochToLongDateFormat } = useTimeZone();
+    const { epochToLongDateFormat } = useAppTimeZone();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);
@@ -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

@@ -51,7 +51,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";
@@ -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: () => []
     },
@@ -111,7 +111,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { validateOn, blurred, getMessages } = useRules();
-    const { epochToShortDateFormat } = useTimeZone();
+    const { epochToShortDateFormat } = useAppTimeZone();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);
@@ -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