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

package/components/FSCalendar.vue

@@ -62,7 +62,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useTimeZone, useLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -103,8 +103,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const { epochToPicker, pickerToEpoch, todayToEpoch } = useTimeZone();
-    const { languageCode } = useLanguageCode();
+    const { epochToPicker, pickerToEpoch, todayToEpoch } = useAppTimeZone();
+    const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));

package/components/FSCalendarTwin.vue

@@ -102,7 +102,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, PropType, ref } from "vue";
 
-import { useTimeZone, useLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -143,8 +143,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useTimeZone();
-    const { languageCode } = useLanguageCode();
+    const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useAppTimeZone();
+    const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));

package/components/FSClickable.vue

@@ -1,11 +1,13 @@
 <template>
   <button
     v-if="!href"
-    :class="wrapperClasses"
     :type="$props.type"
+    :style="style"
     @click.stop="onClick"
   >
     <FSCard
+      :height="$props.height"
+      :width="$props.width"
       :class="classes"
       :style="style"
       v-bind="$attrs"
@@ -26,10 +28,12 @@
   </button>
   <router-link
     v-else
-    :class="wrapperClasses"
+    :style="style"
     :to="href"
   >
     <FSCard
+      :height="$props.height"
+      :width="$props.width"
       :class="classes"
       :style="style"
       v-bind="$attrs"
@@ -96,10 +100,15 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
-    fullWidth: {
-      type: Boolean,
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
       required: false,
-      default: false
+      default: null
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+      required: false,
+      default: null
     },
     load: {
       type: Boolean,
@@ -128,7 +137,9 @@ export default defineComponent({
           "--fs-clickable-border-radius"   : sizeToVar(props.borderRadius),
           "--fs-clickable-background-color": lights.light,
           "--fs-clickable-border-color"    : lights.dark,
-          "--fs-clickable-color"           : lights.dark
+          "--fs-clickable-color"           : lights.dark,
+          "--fs-clickable-height"          : sizeToVar(props.height),
+          "--fs-clickable-width"           : sizeToVar(props.width)
         };
       }
       switch (props.variant) {
@@ -143,7 +154,9 @@ export default defineComponent({
           "--fs-clickable-hover-color"            : colors.value.baseContrast,
           "--fs-clickable-active-background-color": colors.value.dark,
           "--fs-clickable-active-border-color"    : colors.value.darkContrast,
-          "--fs-clickable-active-color"           : colors.value.darkContrast
+          "--fs-clickable-active-color"           : colors.value.darkContrast,
+          "--fs-clickable-height"                 : sizeToVar(props.height),
+          "--fs-clickable-width"                  : sizeToVar(props.width)
         };
         case "full": return {
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
@@ -156,7 +169,9 @@ export default defineComponent({
           "--fs-clickable-hover-color"            : colors.value.baseContrast,
           "--fs-clickable-active-background-color": colors.value.dark,
           "--fs-clickable-active-border-color"    : colors.value.dark,
-          "--fs-clickable-active-color"           : colors.value.darkContrast
+          "--fs-clickable-active-color"           : colors.value.darkContrast,
+          "--fs-clickable-height"                 : sizeToVar(props.height),
+          "--fs-clickable-width"                  : sizeToVar(props.width)
         };
       }
     });
@@ -169,14 +184,6 @@ export default defineComponent({
       return classNames;
     });
 
-    const wrapperClasses = computed((): string[] => {
-      const classNames: string[] = [];
-      if (props.fullWidth) {
-        classNames.push("fs-clickable-wrapper-full-width");
-      }
-      return classNames;
-    });
-
     const href = computed((): string | null => {
       if (!props.to || !props.editable || props.load) {
         return null;
@@ -206,7 +213,6 @@ export default defineComponent({
     };
 
     return {
-      wrapperClasses,
       loadColor,
       classes,
       style,

package/components/FSClock.vue

@@ -73,7 +73,7 @@
 import { computed, defineComponent, PropType, ref, watch } from "vue";
 
 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 { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSlider from "./FSSlider.vue";
@@ -123,7 +123,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToLongDateFormat } = useTimeZone();
+    const { epochToLongDateFormat } = useAppTimeZone();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));

package/components/FSEditImage.vue

@@ -0,0 +1,128 @@
+<template>
+  <FSRow
+    width="fill"
+    gap="24px"
+  >
+    <FSCard
+      class="fs-edit-image"
+      :borderRadius="$props.borderRadius"
+      :padding="$props.padding"
+    >
+      <FSImage
+        :borderRadius="$props.borderRadius"
+        :aspectRatio="$props.aspectRatio"
+        :height="$props.height"
+        :imageB64="realSource"
+        :width="$props.width"
+      />
+    </FSCard>
+    <FSCol
+      height="fill"
+      align="bottom-left"
+    >
+      <FSText
+        v-if="fileSelected"
+        font="text-body"
+      >
+        {{ fileSelected.fileName }}
+      </FSText>
+      <FSRow>
+        <FSButtonFileIcon
+          accept="image/*"
+          :readFile="false"
+          @update:modelValue="onUpload"
+        />
+        <FSButtonRemoveIcon
+          @click="onRemove"
+        />
+      </FSRow>
+    </FSCol>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
+import { FileImage } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButtonRemoveIcon from "./buttons/FSButtonRemoveIcon.vue";
+import FSButtonFileIcon from "./buttons/FSButtonFileIcon.vue";
+import FSImage from "./FSImage.vue";
+import FSCard from "./FSCard.vue";
+import FSText from "./FSText.vue";
+
+export default defineComponent({
+  name: "FSEditImage",
+  components: {
+    FSButtonRemoveIcon,
+    FSButtonFileIcon,
+    FSImage,
+    FSCard,
+    FSText
+  },
+  props: {
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: "8px"
+    },
+    width: {
+      type: [String, Number],
+      required: false,
+      default: null
+    },
+    height: {
+      type: [String, Number],
+      required: false,
+      default: null
+    },
+    aspectRatio: {
+      type: String,
+      required: false,
+      default: null
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    },
+    modelValue: {
+      type: String as PropType<string>,
+      required: false,
+      default: null
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { read } = useFiles();
+
+    const fileSelected = ref<FileImage>({ fileName: "", fileContent: null });
+
+    const realSource = computed(() => {
+      return fileSelected.value && fileSelected.value.fileName ? fileSelected.value.fileContent : props.modelValue;
+    });
+
+    const onUpload = (payload: File) => {
+      read(payload, (content: string) => {
+        fileSelected.value.fileName = payload.name;
+        fileSelected.value.fileContent = content;
+        emit("update:modelValue", content);
+      });
+    };
+
+    const onRemove = () => {
+      fileSelected.value.fileName = "";
+      fileSelected.value.fileContent = null;
+      emit("update:modelValue", null);
+    };
+
+    return {
+      fileSelected,
+      realSource,
+      onUpload,
+      onRemove
+    };
+  }
+});
+</script>

package/components/FSImage.vue

@@ -54,6 +54,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    imageB64: {
+      type: String,
+      required: false,
+      default: null
+    },
     cover: {
       type: Boolean,
       required: false,
@@ -86,6 +91,14 @@ export default defineComponent({
     const imageRef = ref(null);
     const canvasRef = ref(null);
 
+    const signatures = ref<{ [key: string]: string }>({
+      JVBERi0    : "application/pdf",
+      R0lGODdh   : "image/gif",
+      R0lGODlh   : "image/gif",
+      iVBORw0KGgo: "image/png",
+      "/9j/"     : "image/jpg",
+    });
+
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       return {
         "--fs-image-border-radius"   : sizeToVar(props.borderRadius),
@@ -98,7 +111,7 @@ export default defineComponent({
         return props.height;
       }
       if (props.width) {
-        if (typeof(props.width) === "string") {
+        if (typeof (props.width) === "string") {
           return undefined;
         }
         if (props.aspectRatio) {
@@ -117,7 +130,7 @@ export default defineComponent({
         return props.width;
       }
       if (props.height) {
-        if (typeof(props.height) === "string") {
+        if (typeof (props.height) === "string") {
           return undefined;
         }
         if (props.aspectRatio) {
@@ -135,12 +148,38 @@ export default defineComponent({
       if (props.imageId) {
         return IMAGE_RAW_URL(props.imageId);
       }
+      else if (props.imageB64) {
+        if (imageType.value && imageData.value) {
+          return `${imageType.value},${imageData.value}`;
+        }
+      }
       return null;
     });
 
+    const imageData = computed((): string => {
+      if (props.imageB64 && props.imageB64.includes(",")) {
+        return props.imageB64.split(",")[1];
+      }
+      return props.imageB64;
+    });
+
+    const imageType = computed((): string => {
+      if (props.imageB64 && props.imageB64.includes(",")) {
+        return props.imageB64.split(",")[0];
+      }
+      if (props.imageB64) {
+        for (const s in signatures.value) {
+          if (props.imageB64.startsWith(s)) {
+            return `data:${signatures.value[s]};base64`;
+          }
+        }
+      }
+      return "";
+    });
+
     const onError = (): void => {
       if (props.imageId) {
-        fetchBlurHash(props.imageId);   
+        fetchBlurHash(props.imageId);
       }
     };
 

package/components/FSLink.vue

@@ -3,9 +3,10 @@
     :class="classes"
     :style="style"
     :to="href"
+    v-slot="props"
     v-bind="$attrs"
   >
-    <slot>
+    <slot v-bind="props">
       {{ $props.label }}
     </slot>
   </router-link>

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,7 +45,9 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
+  setup(props, { emit }) {
+    const { read } = useFiles();
+    
     const input = ref(null);
 
     const clear = () => {
@@ -65,12 +68,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,7 +45,9 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
+  setup(props, { emit }) {
+    const { read } = useFiles();
+
     const input = ref(null);
 
     const clear = () => {
@@ -65,12 +68,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,7 +44,9 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
+  setup(props, { emit }) {
+    const { read } = useFiles();
+    
     const input = ref(null);
 
     const clear = () => {
@@ -64,12 +67,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,7 +44,9 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
+  setup(props, { emit }) {
+    const { read } = useFiles();
+    
     const input = ref(null);
 
     const clear = () => {
@@ -64,12 +67,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/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

@@ -45,6 +45,7 @@
       :itemValue="$props.itemValue"
       :readonly="!$props.editable"
       :clearable="$props.editable && !!$props.modelValue"
+      :returnObject="$props.returnObject"
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
@@ -127,6 +128,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    returnObject: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     required: {
       type: Boolean,
       required: false,

package/components/fields/FSDateField.vue

@@ -64,7 +64,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";
@@ -126,7 +126,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);

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";
@@ -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);

package/components/fields/FSDateTimeField.vue

@@ -88,7 +88,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";
@@ -153,7 +153,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();
 

package/components/fields/FSDateTimeRangeField.vue

@@ -77,7 +77,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";
@@ -142,7 +142,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();
 

package/components/fields/FSSelectField.vue

@@ -43,6 +43,7 @@
       :itemValue="$props.itemValue"
       :readonly="!$props.editable"
       :clearable="$props.editable && $props.clearable"
+      :returnObject="$props.returnObject"
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
@@ -119,6 +120,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    returnObject: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     required: {
       type: Boolean,
       required: false,

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
@@ -423,6 +425,7 @@
                 width="120px"
               >
                 <FSSelectField
+                  class="fs-data-table-rows-per-page"
                   :clearable="false"
                   :hideHeader="true"
                   :items="rowsPerPageOptions"
@@ -627,6 +630,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    showSearch: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     singleSelect: {
       type: Boolean,
       required: false,
@@ -702,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"];
@@ -1202,6 +1214,7 @@ export default defineComponent({
       innerPage,
       pageOptions,
       showFilters,
+      showFiltersRow,
       extraHeaders,
       innerHeaders,
       hiddenHeaders,

package/components/selects/FSSelectTimeZone.vue

@@ -1,32 +1,34 @@
 <template>
-  <FSSelectField
-    itemTitle="id"
-    :items="entities"
+  <FSSelectField itemTitle="id"
+    :items="timeZones"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs"
-  >
-    <template #selection>
-      <FSRow>
-        <FSSpan font="text-underline" :style="style">
-          {{ entities.find((entity) => entity.id === $props.modelValue)?.id }}
-        </FSSpan>
-      </FSRow>
+    v-bind="$attrs">
+    <template #append-inner>
+      <slot name="append-inner">
+        <FSChip v-if="offset"
+          variant="standard"
+          :color="ColorEnum.Dark"
+          :label="offset" />
+      </slot>
     </template>
   </FSSelectField>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted } from "vue";
+import { computed, defineComponent, onMounted } from "vue";
 
 import { useTimeZones } from "@dative-gpi/foundation-shared-services/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSelectField from "../fields/FSSelectField.vue";
+import FSChip from "../FSChip.vue";
 
 export default defineComponent({
   name: "FSSelectTimeZone",
   components: {
-    FSSelectField
+    FSSelectField,
+    FSChip
   },
   props: {
     modelValue: {
@@ -36,15 +38,21 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue"],
-  setup() {
-    const { getMany, entities } = useTimeZones();
+  setup(props) {
+    const { getMany: getTimeZones, entities: timeZones } = useTimeZones();
+
+    const offset = computed((): string | undefined => {
+      return timeZones.value.find((entity) => entity.id === props.modelValue)?.offset;
+    });
 
     onMounted(() => {
-      getMany();
+      getTimeZones();
     });
 
     return {
-      entities
+      ColorEnum,
+      timeZones,
+      offset
     };
   }
 });

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/models/images.ts

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

package/models/index.ts

@@ -5,6 +5,7 @@ export * from "./deviceConnectivities";
 export * from "./deviceStatuses";
 export * from "./errors";
 export * from "./grids";
+export * from "./images";
 export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";

package/models/rules.ts

@@ -1,9 +1,9 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import { getTimeBestString } from "../utils";
 
-const { epochToLongDateFormat } = useTimeZone()!;
+const { epochToLongDateFormat } = useAppTimeZone()!;
 const { $tr } = useTranslationsProvider();
 
 export const TextRules = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.48",
+  "version": "0.0.50",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.48",
-    "@dative-gpi/foundation-shared-services": "0.0.48",
+    "@dative-gpi/foundation-shared-domain": "0.0.50",
+    "@dative-gpi/foundation-shared-services": "0.0.50",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "0029f53ff50ea72e704647e64d3419266ae680fa"
+  "gitHead": "be18a14ae47c91c1f3ccd22a196593050f06aae8"
 }

package/styles/components/fs_clickable.scss

@@ -26,19 +26,17 @@
 }
 
 a:has(.fs-clickable) {
+    position: relative !important;
     text-decoration: none;
     padding: 0 !important;
-    position: relative !important;
-    width: fit-content;
+    height: var(--fs-clickable-height);
+    width: var(--fs-clickable-width);
 }
 
 button:has(.fs-clickable) {
     position: relative !important;
-    width: fit-content;
-}
-
-.fs-clickable-wrapper-full-width {
-    width: 100% !important;
+    height: var(--fs-clickable-height);
+    width: var(--fs-clickable-width);
 }
 
 .fs-clickable-load {

package/styles/components/fs_edit_image.scss

@@ -0,0 +1,3 @@
+.fs-edit-image {
+    border-style: dashed;
+}

package/styles/components/index.scss

@@ -19,6 +19,7 @@
 @import "fs_dialog.scss";
 @import "fs_divider.scss";
 @import "fs_draggable.scss";
+@import "fs_edit_image.scss";
 @import "fs_error_toast.scss";
 @import "fs_fade_out.scss";
 @import "fs_filter_button.scss";