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

package/components/lists/FSDataTableUI.vue

@@ -743,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

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

@@ -16,7 +16,7 @@
 </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";
@@ -32,7 +32,7 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },

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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.50",
+  "version": "0.0.51",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.50",
-    "@dative-gpi/foundation-shared-services": "0.0.50",
+    "@dative-gpi/foundation-shared-domain": "0.0.51",
+    "@dative-gpi/foundation-shared-services": "0.0.51",
     "@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": "be18a14ae47c91c1f3ccd22a196593050f06aae8"
+  "gitHead": "13a8e0d4bd10a05a35c570412fa2024d33b0c115"
 }

package/styles/components/fs_clock.scss

@@ -4,10 +4,10 @@
 
 .fs-clock-field {
     padding: 0px !important;
-    width: 72px !important;
 
     &.v-input {
-        flex: 0 0 auto !important;
+        min-width: 76px !important;
+        max-width: 76px !important;
     }
 
     & > .v-input__control > .v-field {
@@ -15,6 +15,7 @@
         border: 1px solid var(--fs-clock-field-border-color) !important;
         border-radius: 4px !important;
         padding: 0 16px !important;
+        gap: 0 !important;
 
         &:not(.v-field--error):focus-within {
             border-color: var(--fs-clock-field-active-border-color) !important;

package/styles/globals/overrides.scss

@@ -30,7 +30,7 @@
 .v-input {
     padding: 0px !important;
 
-    &:not(.v-checkbox) {
+    &:not(.v-checkbox):not(.v-slider) {
         min-width: 200px;
         width: 100%;
     }