@dative-gpi/foundation-shared-components 0.0.19 → 0.0.21

package/components/FSToggleSet.vue

@@ -1,6 +1,7 @@
 <template>
   <FSWrapGroup
     v-if="['wrap'].includes($props.variant)"
+    ref="toggleSetRef"
     :padding="$props.padding"
     :gap="$props.gap"
   >
@@ -40,6 +41,7 @@
   </FSWrapGroup>
   <FSSlideGroup
     v-else
+    ref="toggleSetRef"
     :padding="$props.padding"
     :gap="$props.gap"
   >
@@ -80,7 +82,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, PropType, ref } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
@@ -175,6 +177,8 @@ export default defineComponent({
 
     const firstChild = getFirstChild("item");
 
+    const toggleSetRef = ref(null);
+
     const getFromFirstChild = (prop: string, value: FSToggle): any => {
       switch (prop) {
         case "prependIcon":
@@ -269,12 +273,27 @@ export default defineComponent({
       }
     };
 
+    const goToStart = () => {
+      if (toggleSetRef.value) {
+        toggleSetRef.value.goToStart();
+      }
+    };
+
+    const goToEnd = () => {
+      if (toggleSetRef.value) {
+        toggleSetRef.value.goToEnd();
+      }
+    };
+
     return {
+      toggleSetRef,
       firstChild,
       getFromFirstChild,
       getVariant,
+      goToStart,
       getColor,
       getClass,
+      goToEnd,
       toggle
     };
   }

package/components/FSWrapGroup.vue

@@ -1,6 +1,7 @@
 <template>
   <v-slide-group
     class="fs-wrap-group"
+    ref="wrapGroupRef"
     :style="style"
     v-bind="$attrs"
   >
@@ -14,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, ref } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -40,6 +41,8 @@ export default defineComponent({
 
     const darks = getColors(ColorEnum.Dark);
 
+    const wrapGroupRef = ref(null);
+
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
@@ -47,9 +50,26 @@ export default defineComponent({
       "--fs-group-hover-color": darks.dark
     }));
 
+    const goToStart = () => {
+      if (wrapGroupRef.value) {
+        wrapGroupRef.value.scrollOffset = 0;
+      }
+    };
+
+    const goToEnd = () => {
+      if (wrapGroupRef.value) {
+        const contentSize = wrapGroupRef.value.$el.children[1].children[0].clientWidth;
+        const containerSize = wrapGroupRef.value.$el.clientWidth;
+        wrapGroupRef.value.scrollOffset = (contentSize - containerSize);
+      }
+    };
+
     return {
+      wrapGroupRef,
       style,
-      getChildren
+      getChildren,
+      goToStart,
+      goToEnd
     };
   }
 });

package/components/buttons/FSButtonFile.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <FSButton
+      prependIcon="mdi-upload-outline"
+      :label="$tr('ui.button.import-file', 'Import file')"
+      :color="ColorEnum.Light"
+      @click="onClick"
+      v-bind="$attrs"
+    />
+    <form>
+      <input
+        v-show="false"
+        type="file"
+        ref="input"
+        :accept="$props.accept"
+        @input="onInput"
+      />
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonFile",
+  components: {
+    FSButton
+  },
+  props: {
+    accept: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    readFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {    
+    const input = ref(null);
+
+    const clear = () => {
+      input.value!.form && input.value!.form.reset();
+    };
+
+    const onClick = () => {
+      input.value!.click();
+    }
+
+    const onInput = () => {
+      const file = input.value!.files && input.value!.files[0];
+      if (!file) {
+        return;
+      }
+      if (!props.readFile) {
+        emit("update:modelValue", file);
+        clear();
+      }
+      else {
+        const reader = new FileReader();
+        reader.addEventListener("load", (fileEv) => {
+          emit("update:modelValue", fileEv.target && fileEv.target.result);
+          clear();
+        });
+        reader.readAsDataURL(file);
+      }
+    };
+
+    return {
+      ColorEnum,
+      input,
+      onClick,
+      onInput
+    };
+  }
+});
+</script>

package/components/buttons/FSButtonFileIcon.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <FSButton
+      icon="mdi-upload-outline"
+      variant="icon"
+      :color="ColorEnum.Light"
+      @click="onClick"
+      v-bind="$attrs"
+    />
+    <form>
+      <input
+        v-show="false"
+        type="file"
+        ref="input"
+        :accept="$props.accept"
+        @input="onInput"
+      />
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonFileIcon",
+  components: {
+    FSButton
+  },
+  props: {
+    accept: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    readFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {    
+    const input = ref(null);
+
+    const clear = () => {
+      input.value!.form && input.value!.form.reset();
+    };
+
+    const onClick = () => {
+      input.value!.click();
+    }
+
+    const onInput = () => {
+      const file = input.value!.files && input.value!.files[0];
+      if (!file) {
+        return;
+      }
+      if (!props.readFile) {
+        emit("update:modelValue", file);
+        clear();
+      }
+      else {
+        const reader = new FileReader();
+        reader.addEventListener("load", (fileEv) => {
+          emit("update:modelValue", fileEv.target && fileEv.target.result);
+          clear();
+        });
+        reader.readAsDataURL(file);
+      }
+    };
+
+    return {
+      ColorEnum,
+      input,
+      onClick,
+      onInput
+    };
+  }
+});
+</script>

package/components/buttons/FSButtonFileLabel.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <FSButton
+      :label="$tr('ui.button.import-file', 'Import file')"
+      :color="ColorEnum.Light"
+      @click="onClick"
+      v-bind="$attrs"
+    />
+    <form>
+      <input
+        v-show="false"
+        type="file"
+        ref="input"
+        :accept="$props.accept"
+        @input="onInput"
+      />
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonFileLabel",
+  components: {
+    FSButton
+  },
+  props: {
+    accept: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    readFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {    
+    const input = ref(null);
+
+    const clear = () => {
+      input.value!.form && input.value!.form.reset();
+    };
+
+    const onClick = () => {
+      input.value!.click();
+    }
+
+    const onInput = () => {
+      const file = input.value!.files && input.value!.files[0];
+      if (!file) {
+        return;
+      }
+      if (!props.readFile) {
+        emit("update:modelValue", file);
+        clear();
+      }
+      else {
+        const reader = new FileReader();
+        reader.addEventListener("load", (fileEv) => {
+          emit("update:modelValue", fileEv.target && fileEv.target.result);
+          clear();
+        });
+        reader.readAsDataURL(file);
+      }
+    };
+
+    return {
+      ColorEnum,
+      input,
+      onClick,
+      onInput
+    };
+  }
+});
+</script>

package/components/buttons/FSButtonFileMini.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <FSButton
+      prependIcon="mdi-upload-outline"
+      :color="ColorEnum.Light"
+      @click="onClick"
+      v-bind="$attrs"
+    />
+    <form>
+      <input
+        v-show="false"
+        type="file"
+        ref="input"
+        :accept="$props.accept"
+        @input="onInput"
+      />
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonFileMini",
+  components: {
+    FSButton
+  },
+  props: {
+    accept: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    readFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {    
+    const input = ref(null);
+
+    const clear = () => {
+      input.value!.form && input.value!.form.reset();
+    };
+
+    const onClick = () => {
+      input.value!.click();
+    }
+
+    const onInput = () => {
+      const file = input.value!.files && input.value!.files[0];
+      if (!file) {
+        return;
+      }
+      if (!props.readFile) {
+        emit("update:modelValue", file);
+        clear();
+      }
+      else {
+        const reader = new FileReader();
+        reader.addEventListener("load", (fileEv) => {
+          emit("update:modelValue", fileEv.target && fileEv.target.result);
+          clear();
+        });
+        reader.readAsDataURL(file);
+      }
+    };
+
+    return {
+      ColorEnum,
+      input,
+      onClick,
+      onInput
+    };
+  }
+});
+</script>

package/components/fields/FSIconField.vue

@@ -25,20 +25,21 @@
     </FSTextField>
     <FSToggleSet
       class="fs-icon-field-set"
+      ref="toggleSetRef"
       variant="slide"
-      :values="icons"
-      :required="$props.required"
-      :editable="$props.editable"
       :buttonColor="$props.buttonColor"
       :activeColor="$props.activeColor"
       :modelValue="$props.modelValue"
+      :required="$props.required"
+      :editable="$props.editable"
+      :values="icons"
       @update:modelValue="(value) => $emit('update:modelValue', value)"
     />
   </FSCol>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { computed, defineComponent, PropType, ref, watch } from "vue";
 
 import { Icons, sortByLevenshteinDistance } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
@@ -129,6 +130,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
+    const toggleSetRef = ref(null);
     const innerValue = ref(null);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
@@ -170,7 +172,11 @@ export default defineComponent({
       }
       if (props.modelValue) {
         const selectedIcon = innerIcons.find((icon) => icon.id === props.modelValue);
-        if (!selectedIcon) {
+        if (selectedIcon) {
+          innerIcons.splice(innerIcons.indexOf(selectedIcon), 1);
+          innerIcons.unshift(selectedIcon);
+        }
+        else {
           innerIcons.unshift({
             id: props.modelValue,
             prependIcon: props.modelValue
@@ -182,7 +188,14 @@ export default defineComponent({
 
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
+    watch(() => props.modelValue, () => {
+      if (toggleSetRef.value) {
+        toggleSetRef.value.goToStart();
+      }
+    });
+
     return {
+      toggleSetRef,
       innerValue,
       validateOn,
       messages,

package/components/lists/FSDataTableUI.vue

@@ -242,6 +242,7 @@
               v-if="innerRowsPerPage !== -1"
               class="fs-data-table-pagination"
               variant="slide"
+              :dash="pageOptions.length > 8"
               :values="pageOptions"
               :required="true"
               v-model="innerPage"
@@ -349,6 +350,7 @@
               v-if="innerRowsPerPage !== -1"
               class="fs-data-table-pagination"
               variant="slide"
+              :dash="pageOptions.length > 8"
               :values="pageOptions"
               :required="true"
               v-model="innerPage"

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -38,6 +38,7 @@
             gap="4px"
           >
             <FSConnectivity
+              v-if="$props.deviceConnectivity"
               :deviceConnectivity="$props.deviceConnectivity"
             />
             <FSWorstAlert
@@ -129,7 +130,7 @@ export default defineComponent({
     deviceAlerts: {
       type: Array as PropType<FSDeviceAlert[]>,
       required: false,
-      default: null
+      default: () => []
     },
     modelStatuses: {
       type: Array as PropType<FSModelStatus[]>,

package/composables/useBreakpoints.ts

@@ -1,5 +1,7 @@
 import { computed, onMounted, onUnmounted, ref } from "vue";
 
+let initialized = false;
+
 export const useBreakpoints = () => {
     const windowWidth = ref(window.innerWidth);
 
@@ -7,14 +9,6 @@ export const useBreakpoints = () => {
         windowWidth.value = window.innerWidth;
     };
 
-    onMounted(() => {
-        window.addEventListener("resize", onSizeChange);
-    });
-
-    onUnmounted(() => {
-        window.removeEventListener("resize", onSizeChange);
-    });
-
     const isTouchScreenEnabled = computed((): boolean => {
         return navigator.maxTouchPoints > 0;
     });
@@ -27,6 +21,11 @@ export const useBreakpoints = () => {
         return windowWidth.value < 600;
     });
 
+    if (!initialized) {
+        window.addEventListener("resize", onSizeChange);
+        initialized = true;
+    }
+
     return {
         isTouchScreenEnabled,
         isMobileSized,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.19",
-    "@dative-gpi/foundation-shared-services": "0.0.19",
+    "@dative-gpi/foundation-shared-domain": "0.0.21",
+    "@dative-gpi/foundation-shared-services": "0.0.21",
     "@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": "b6113681d7768c430b48be2e13dcfa54dc5f6882"
+  "gitHead": "27642f99177d57e7349dd826e922442a6c0720cb"
 }

package/styles/components/fs_button.scss

@@ -1,39 +1,3 @@
-.fs-button {
-    padding: var(--fs-button-padding) !important;
-    border-radius: 4px !important;
-    border: 1px solid !important;
-    box-shadow: none !important;
-    
-    background-color: var(--fs-button-background-color) !important;
-    border-color: var(--fs-button-border-color) !important;
-    color: var(--fs-button-color) !important;
-
-    &.fs-button-full-width {
-        width: 100%;
-    }
-
-    &:not(.fs-button--disabled):hover {
-        background-color: var(--fs-button-hover-background-color) !important;
-        color: var(--fs-button-hover-color) !important;
-    }
-
-    &:not(.fs-button--disabled):active {
-        background-color: var(--fs-button-active-background-color) !important;
-        border-color: var(--fs-button-active-border-color) !important;
-        color: var(--fs-button-active-color) !important;
-    }
-
-    @include web {
-        min-width: 40px !important;
-        height: 40px !important;
-    }
-
-    @include mobile {
-        min-width: 36px !important;
-        height: 36px !important;
-    }
-}
-
 .fs-button-icon {
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     color: var(--fs-button-color) !important;

package/styles/components/fs_clickable.scss

@@ -0,0 +1,31 @@
+.fs-clickable {
+    border-radius: var(--fs-clickable-border-radius) !important;
+    border: var(--fs-clickable-border-size) solid !important;
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    
+    background-color: var(--fs-clickable-background-color) !important;
+    border-color: var(--fs-clickable-border-color) !important;
+    color: var(--fs-clickable-color) !important;
+
+    &.fs-clickable-disabled {
+        cursor: default;
+    }
+
+    &:not(.fs-clickable-disabled):hover {
+        background-color: var(--fs-clickable-hover-background-color) !important;
+        border-color: var(--fs-clickable-hover-border-color) !important;
+        color: var(--fs-clickable-hover-color) !important;
+    }
+
+    &:not(.fs-clickable-disabled):active {
+        background-color: var(--fs-clickable-active-background-color) !important;
+        border-color: var(--fs-clickable-active-border-color) !important;
+        color: var(--fs-clickable-active-color) !important;
+    }
+}
+
+a:has(.fs-clickable) {
+    text-decoration: none;
+    padding: 0 !important;
+}

package/styles/components/fs_data_table.scss

@@ -87,11 +87,11 @@
 
 .fs-data-table-pagination {
     @include web {
-        max-width: 200px;
+        max-width: 280px;
     }
 
     @include mobile {
-        max-width: 194px;
+        max-width: 274px;
     }
 }
 

package/styles/components/index.scss

@@ -6,6 +6,7 @@
 @import "fs_carousel.scss";
 @import "fs_checkbox.scss";
 @import "fs_chip.scss";
+@import "fs_clickable.scss";
 @import "fs_clock.scss";
 @import "fs_col.scss";
 @import "fs_color_field.scss";