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

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 {

package/components/lists/FSDataTableUI.vue

@@ -5,16 +5,18 @@
     <FSRow
       align="bottom-center"
     >
-      <FSSearchField
-        prependInnerIcon="mdi-magnify"
-        :hideHeader="true"
-        v-model="innerSearch"
-      />
-      <FSButton
-        prependIcon="mdi-filter-variant"
-        :variant="showFilters ? 'full' : 'standard'"
-        @click="showFilters = !showFilters"
-      />
+      <template v-if="$props.showSearch">
+        <FSSearchField
+          prependInnerIcon="mdi-magnify"
+          :hideHeader="true"
+          v-model="innerSearch"
+        />
+        <FSButton
+          prependIcon="mdi-filter-variant"
+          :variant="showFilters ? 'full' : 'standard'"
+          @click="showFilters = !showFilters"
+        />
+      </template>
       <slot name="toolbar" />
       <v-spacer />
       <FSOptionGroup
@@ -25,7 +27,7 @@
       />
     </FSRow>
     <FSRow
-      v-if="(showFilters && filterableHeaders.length > 0) || hiddenHeaders.length > 0"
+      v-if="showFiltersRow"
     >
       <template v-if="showFilters">
         <FSFilterButton
@@ -628,6 +630,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    showSearch: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     singleSelect: {
       type: Boolean,
       required: false,
@@ -703,6 +710,10 @@ export default defineComponent({
       { id: -1, label: $tr("ui.data-table.all-rows", "All") }
     ];
 
+    const showFiltersRow = computed((): boolean => {
+      return (props.showSearch && showFilters.value && filterableHeaders.value.length > 0) || hiddenHeaders.value.length > 0;
+    });
+
     const innerSlots = computed((): { [label: string]: Slot<any> } => {
       const slots = { ...useSlots().slots };
       delete slots["toolbar"];
@@ -732,7 +743,7 @@ export default defineComponent({
       return slots;
     });
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-data-table-background-color": backgrounds.base,
         "--fs-data-table-border-color": lights.base
@@ -1203,6 +1214,7 @@ export default defineComponent({
       innerPage,
       pageOptions,
       showFilters,
+      showFiltersRow,
       extraHeaders,
       innerHeaders,
       hiddenHeaders,

package/components/lists/FSDraggable.vue

@@ -80,9 +80,11 @@ export default defineComponent({
       touchEndX.value = touch.clientX;
       touchEndY.value = touch.clientY;
 
-      draggedElementCopy.value.style.left = `${touchEndX.value - 25}px`;
-      draggedElementCopy.value.style.top = `${touchEndY.value - 25}px`;
-      document.body.appendChild(draggedElementCopy.value);
+      if (draggedElementCopy.value) {
+        draggedElementCopy.value.style.left = `${touchEndX.value - 25}px`;
+        draggedElementCopy.value.style.top = `${touchEndY.value - 25}px`;
+        document.body.appendChild(draggedElementCopy.value);
+      }
       const dragOverTarget = document.elementFromPoint(touchEndX.value, touchEndY.value)?.closest(props.elementSelector);
 
       if (dragOverTarget) {
@@ -116,8 +118,10 @@ export default defineComponent({
       }
       event.preventDefault();
       const dragged = (event.target as HTMLElement)?.closest(props.elementSelector);
-      draggedElementCopy.value.remove();
-      draggedElementCopy.value = null;
+      if (draggedElementCopy.value) {
+        draggedElementCopy.value.remove();
+        draggedElementCopy.value = null;
+      }
 
       const dropTarget = document.elementFromPoint(touchEndX.value, touchEndY.value);
       const dragEndEvent = new Event("dragend");
@@ -137,7 +141,9 @@ export default defineComponent({
       touchStartY.value = 0;
       touchEndX.value = 0;
       touchEndY.value = 0;
-      dragged.classList.remove("fs-draggable-dragging");
+      if (dragged) {
+        dragged.classList.remove("fs-draggable-dragging");
+      }
     };
 
     const onDragStart = (event: DragEvent) => {

package/components/lists/FSFilterButton.vue

@@ -113,21 +113,24 @@ export default defineComponent({
 
     const singlePick = ref(false);
     const expanded = ref(false);
-    const search = ref(null);
+    const search = ref<string | null>(null);
 
-    const label = computed(() => {
-      if (props.filters) {
-        const hidden = props.filters.filter(f => f.hidden).length;
-        if (hidden > 0) {
-          return $tr("ui.data-table.some-filters-visible", "{0}: {1} visible", props.header.text, (props.filters.length - hidden).toString());
+    const label = computed((): string | null => {
+      if (props.header.text) {
+          if (props.filters) {
+          const hidden = props.filters.filter(f => f.hidden).length;
+          if (hidden > 0) {
+            return $tr("ui.data-table.some-filters-visible", "{0}: {1} visible", props.header.text, (props.filters.length - hidden).toString());
+          }
         }
+        return $tr("ui.data-table.all-filters-visible", "{0}: All visible", props.header.text);
       }
-      return $tr("ui.data-table.all-filters-visible", "{0}: All visible", props.header.text);
+      return null;
     });
 
     const searchedFilters = computed((): FSDataTableFilter[] => {
       if (search.value) {
-        return props.filters.filter(f => (f.text + f.value).includes(search.value));
+        return props.filters.filter(f => (f.text + f.value).includes(search.value!));
       }
       return props.filters;
     });

package/components/lists/FSLoadDataTable.vue

@@ -81,7 +81,7 @@ export default defineComponent({
 
     const backgroundColors = getColors(ColorEnum.Background);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-load-data-table-background-color": backgroundColors.base
       };

package/components/selects/FSSelectTimeZone.vue

@@ -1,26 +1,22 @@
 <template>
-  <FSSelectField
-    itemTitle="id"
+  <FSSelectField itemTitle="id"
     :items="timeZones"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs"
-  >
+    v-bind="$attrs">
     <template #append-inner>
       <slot name="append-inner">
-        <FSChip
-          v-if="offset"
+        <FSChip v-if="offset"
           variant="standard"
           :color="ColorEnum.Dark"
-          :label="offset"
-        />
+          :label="offset" />
       </slot>
     </template>
   </FSSelectField>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted } from "vue";
+import { computed, defineComponent, onMounted, PropType } from "vue";
 
 import { useTimeZones } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -36,7 +32,7 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -45,7 +41,7 @@ export default defineComponent({
   setup(props) {
     const { getMany: getTimeZones, entities: timeZones } = useTimeZones();
 
-    const offset = computed((): string => {
+    const offset = computed((): string | undefined => {
       return timeZones.value.find((entity) => entity.id === props.modelValue)?.offset;
     });
 

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -103,17 +103,17 @@ export default defineComponent({
   },
   props: {
     imageId: {
-      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
     },
     code: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },

package/components/tiles/FSGroupTileUI.vue

@@ -125,17 +125,17 @@ export default defineComponent({
   },
   props: {
     imageId: {
-      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
     },
     code: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },

package/components/tiles/FSLoadTile.vue

@@ -108,7 +108,7 @@ export default defineComponent({
       }
     });
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-load-tile-background-color": backgroundColors.base
       };

package/components/tiles/FSTile.vue

@@ -64,7 +64,7 @@ export default defineComponent({
 
     const bottomColors = computed(() => getGradients(props.bottomColor));
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-tile-border-color": bottomColors.value.base
       };

package/composables/index.ts

@@ -1,5 +1,6 @@
 export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";
+export * from "./useFiles";
 export * from "./useRules";
 export * from "./useSlots";

package/composables/useFiles.ts

@@ -0,0 +1,13 @@
+export const useFiles = () => {
+    const read = (file: File, callback: Function): void => {
+        const reader = new FileReader();
+        reader.addEventListener("load", (fileEv) => {
+          callback(fileEv.target && fileEv.target.result);
+        });
+        reader.readAsDataURL(file);
+    };
+
+    return {
+        read
+    };
+}

package/composables/useRules.ts

@@ -6,7 +6,7 @@ export const useRules = () => {
 
   const blurred = ref(false);
 
-  const validateOn = computed((): string => {
+  const validateOn = computed((): "input" | "submit" | "blur" => {
     switch (innerValidateOn.value) {
       case "submit": return submitted.value ? "input" : "submit";
       case "blur":   return blurred.value ? "input" : "blur";

package/models/colors.ts

@@ -19,4 +19,4 @@ export interface ColorVariations {
     darkContrast?: string;
 };
 
-export type ColorBase = (String | ColorEnum);
+export type ColorBase = (string | ColorEnum);

package/models/deviceStatuses.ts

@@ -6,7 +6,7 @@ export interface FSDeviceStatus {
 export interface FSDeviceStatusGroup {
     label: string;
     groupByValue?: string;
-    value: string;
+    value?: string;
     unit?: string;
     icon: string;
     color: string;

package/models/images.ts

@@ -0,0 +1,4 @@
+export interface FileImage {
+    fileName: string;
+    fileContent: string | ArrayBuffer | null;
+}