@dative-gpi/foundation-shared-components 1.0.94 → 1.0.96

package/components/lists/FSDataTableUI.vue

@@ -289,25 +289,29 @@
               <slot
                 :name="`${header.slotName}-append`"
               />
-              <v-spacer />
-              <slot
-                :name="`${header.slotName}-configuration`"
+              <FSRow
+                align="center-right"
+                :wrap="false"
               >
-                <FSHeaderButton
-                  :first="index === 0"
-                  :last="index === headersSlots.length - 1"
-                  @update:hide="updateHeader(header, 'hidden', !header.hidden)"
-                  @update:left="updateHeader(header, 'index', -1)"
-                  @update:right="updateHeader(header, 'index', 1)"
-                />
-                <FSButton
-                  v-if="header.sortable"
-                  variant="icon"
-                  :color="sortColor(header, props)"
-                  :icon="sortIcon(header, props)"
-                  @click="toggleSort(header)"
-                />
-              </slot>
+                <slot
+                  :name="`${header.slotName}-configuration`"
+                >
+                  <FSHeaderButton
+                    :first="index === 0"
+                    :last="index === headersSlots.length - 1"
+                    @update:hide="updateHeader(header, 'hidden', !header.hidden)"
+                    @update:left="updateHeader(header, 'index', -1)"
+                    @update:right="updateHeader(header, 'index', 1)"
+                  />
+                  <FSButton
+                    v-if="header.sortable"
+                    variant="icon"
+                    :color="sortColor(header, props)"
+                    :icon="sortIcon(header, props)"
+                    @click="toggleSort(header)"
+                  />
+                </slot>
+              </FSRow>
             </FSRow>
           </slot>
         </template>
@@ -370,7 +374,6 @@
                 </FSText>
               </template>
             </template>
-            <v-spacer />
             <FSRow
               align="center-right"
               width="hug"
@@ -544,7 +547,6 @@
                 </FSText>
               </template>
             </template>
-            <v-spacer />
             <FSRow
               align="center-right"
               :wrap="false"
@@ -1249,7 +1251,7 @@ export default defineComponent({
                 return header.methodFilterRaw(ff.value, item);
               }
               const flat = property = [property].flat();
-              return Array.isArray(flat) ? flat.includes(ff.value) || (!ff.value && flat.length == 0) : (!ff.value && !flat) || ff.value == flat;
+              return (!ff.value && flat.length == 0) || flat.some(f => f == ff.value);
             })
           }));
           filterDictionary[key] = value;
@@ -1272,7 +1274,7 @@ export default defineComponent({
                     return header.methodFilterRaw(dv, item);
                   }
                   const flat = [property].flat().map(mapToInnerValue);
-                  return Array.isArray(flat) ? flat.includes(dv) || (!dv && flat.length == 0) : (!dv && !flat) || dv == flat;
+                  return (!dv && flat.length == 0) || flat.some(f => f == dv);
                 })
               }
             });

package/components/lists/FSLoadDataTable.vue

@@ -13,13 +13,16 @@
       <FSLoader
         variant="button"
       />
-      <v-spacer />
-      <FSLoader
-        variant="button"
-      />
-      <FSLoader
-        variant="button"
-      />
+      <FSRow
+        align="center-right"
+      >
+        <FSLoader
+          variant="button"
+        />
+        <FSLoader
+          variant="button"
+        />
+      </FSRow>
     </FSRow>
     <FSRow>
       <FSLoader

package/components/tiles/FSChartTile.vue

@@ -0,0 +1,73 @@
+<template>
+  <FSChartTileUI
+    v-if="chart"
+    :label="chart.label"
+    :icon="chart.icon"
+    :type="chart.chartType"
+    :imageId="chart.imageId"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, computed } from "vue";
+import type { PropType } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
+
+import { useChartOrganisation, useChartOrganisationType } from "@dative-gpi/foundation-core-services/composables";
+
+import { ApplicationScope } from "@dative-gpi/foundation-shared-domain/enums";
+import FSChartTileUI from "./FSChartTileUI.vue";
+
+export default defineComponent({
+  name: "FSChartTile",
+  components: {
+    FSChartTileUI
+  },
+  props: {
+    chartId: {
+      type: String,
+      required: true
+    },
+    scope: {
+      type: Object as PropType<ApplicationScope | number>,
+      required : true
+    }
+  },
+  setup(props) {
+
+    const {get : fetchChartOrganisation, entity : chartOrganisation } = useChartOrganisation();
+    const {get : fetchChartOrganisationType, entity : chartOrganisationType } = useChartOrganisationType();
+
+    const chart = computed(() =>{
+      if(props.scope == ApplicationScope.Organisation){
+        return chartOrganisation.value;
+      }
+      else if(props.scope == ApplicationScope.OrganisationType){
+        return chartOrganisationType.value;
+      }
+      else{
+        return null
+      }
+    })
+
+    watch(() => [props.chartId, props.scope], () =>{
+      if(props.scope == ApplicationScope.Organisation){
+        fetchChartOrganisation(props.chartId);
+      }
+      else if(props.scope == ApplicationScope.OrganisationType)
+      {
+        fetchChartOrganisationType(props.chartId)
+      }
+    }, {immediate : true})
+
+    return {
+      ColorEnum,
+      chart,
+      chartIcon
+    };
+  }
+});
+</script>

package/components/tiles/FSChartTileUI.vue

@@ -1,8 +1,9 @@
 <template>
   <FSClickable
-    padding="16px"
     :width="['275px','336px']"
     :height="['124px','156px']"
+    padding="16px 16px 16px 20px"
+    borderRadius="8px"
     v-bind="$attrs"
   >
     <template
@@ -10,27 +11,24 @@
     >
       <FSRow
         align="center-left"
+        gap="16px"
         :wrap="false"
       >
         <FSCol
           align="center-left"
         >
           <FSSpan
-            font="text-button"
-            :lineClamp="2"
+            font="text-overline"
+            :lineClamp="4"
           >
             {{ $props.label }}
           </FSSpan>
           <FSIcon
             :color="ColorEnum.Error"
+            size="18px"
           >
             {{ chartIcon(type) }}
           </FSIcon>
-          <FSSpan
-            font="text-overline"
-          >
-            {{ $props.categoryLabel }}
-          </FSSpan>
         </FSCol>
         <FSCol
           align="center-right"
@@ -38,13 +36,13 @@
         >
           <FSImage
             v-if="$props.imageId"
-            height="92px"
-            width="92px"          
+            height="82px"
+            width="82px"          
             :imageId="$props.imageId"
           />
           <FSIcon
             v-else-if="$props.icon"
-            size="92px"
+            size="82px"
             :icon="$props.icon"
           />
         </FSCol>
@@ -58,7 +56,7 @@ import { defineComponent } from "vue";
 import type { PropType } from "vue";
 
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import type { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
+import { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
 
 import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
 
@@ -69,15 +67,16 @@ import FSIcon from "../FSIcon.vue";
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
 
+
 export default defineComponent({
   name: "FSChartTileUI",
   components: {
-    FSIcon,
+    FSClickable,
     FSImage,
+    FSIcon,
     FSRow,
     FSCol,
     FSSpan,
-    FSClickable
   },
   props: {
     label: {
@@ -90,11 +89,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    categoryLabel: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     icon: {
       type: String as PropType<string | null>,
       required: false,
@@ -103,7 +97,7 @@ export default defineComponent({
     type: {
       type: Number as PropType<ChartType>,
       required: false,
-      default: null
+      default: ChartType.None
     }
   },
   setup() {

package/components/tiles/FSCommentTileUI.vue

@@ -26,15 +26,19 @@
             -
             {{ timestamp }}
           </FSText>
-          <v-spacer />
-          <FSButtonEditIcon
-            v-if="canEditRemove"
-            @click="showEditComment = true"
-          />
-          <FSButtonRemoveIcon
-            v-if="canEditRemove"
-            @click="removeDialog = true"
-          />
+          <FSRow
+            align="center-right"
+            :wrap="false"
+          >
+            <FSButtonEditIcon
+              v-if="canEditRemove"
+              @click="showEditComment = true"
+            />
+            <FSButtonRemoveIcon
+              v-if="canEditRemove"
+              @click="removeDialog = true"
+            />
+          </FSRow>
         </FSRow>
       </template>
       <template

package/components/tiles/FSLocationTileUI.vue

@@ -21,7 +21,7 @@
           :width="infoWidth"
         >
           <FSCol
-            gap="6px"
+            gap="4px"
           >
             <FSSpan
               font="text-button"
@@ -37,59 +37,63 @@
               {{ $props.code }}
             </FSSpan>
           </FSCol>
-          <FSRow
-            v-if="$props.deviceCount"
-            :wrap="false"
-            align="center-left"
+          <FSCol
+            gap="8px"
           >
-            <FSColor
-              width="24px"
-              height="24px"
-              :color="ColorEnum.Light"
-              :border="false"
+            <FSRow
+              v-if="$props.deviceCount"
+              :wrap="false"
+              align="center-left"
             >
-              <FSRow
-                align="center-center"
+              <FSColor
+                width="24px"
+                height="24px"
+                :color="ColorEnum.Light"
+                :border="false"
               >
-                <FSSpan
-                  font="text-overline"
+                <FSRow
+                  align="center-center"
                 >
-                  {{ $props.deviceCount <= 99 ? $props.deviceCount : "99+" }}
-                </FSSpan>
-              </FSRow>
-            </FSColor>
-            <FSSpan
-              font="text-overline"
-            >
-              {{ $tr("entity.location.devices", "Devices") }}
-            </FSSpan>
-          </FSRow>
-          <FSRow
-            v-if="$props.address"
-            :wrap="false"
-            align="center-left"
-          >
-            <FSColor
-              width="24px"
-              height="24px"
-              :color="ColorEnum.Light"
-              :border="false"
-            >
-              <FSRow
-                align="center-center"
+                  <FSSpan
+                    font="text-overline"
+                  >
+                    {{ $props.deviceCount <= 99 ? $props.deviceCount : "99+" }}
+                  </FSSpan>
+                </FSRow>
+              </FSColor>
+              <FSSpan
+                font="text-overline"
               >
-                <FSIcon
-                  icon="mdi-map-marker"
-                  size="16px"
-                />
-              </FSRow>
-            </FSColor>
-            <FSSpan
-              font="text-overline"
+                {{ $tr("entity.location.devices", "Devices") }}
+              </FSSpan>
+            </FSRow>
+            <FSRow
+              v-if="$props.address"
+              :wrap="false"
+              align="center-left"
             >
-              {{ $props.address }}
-            </FSSpan>
-          </FSRow>
+              <FSColor
+                width="24px"
+                height="24px"
+                :color="ColorEnum.Light"
+                :border="false"
+              >
+                <FSRow
+                  align="center-center"
+                >
+                  <FSIcon
+                    icon="mdi-map-marker"
+                    size="16px"
+                  />
+                </FSRow>
+              </FSColor>
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $props.address }}
+              </FSSpan>
+            </FSRow>
+          </FSCol>
         </FSCol>
         <FSIconCard
           backgroundVariant="standard"

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -30,9 +30,9 @@
           v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
           :backgroundColor="$props.iconBackgroundColors"
+          :iconColor="$props.iconColor"
           :border="$props.iconBorder"
           :icon="$props.icon"
-          :iconColor="$props.color"
           :size="actualImageSize"
         />
         <FSCol
@@ -144,16 +144,16 @@ export default defineComponent({
       required: false,
       default: () => ["124px", "96px", "80px"]
     },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: null
-    },
     icon: {
       type: String as PropType<string>,
       required: false,
       default: "mdi-ab-testing"
     },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: null
+    },
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
       required: false,
@@ -195,7 +195,6 @@ export default defineComponent({
       topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 24));
     }
 
-
     delete slots.title;
 
     return {

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -22,9 +22,9 @@
           v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
           :backgroundColor="$props.iconBackgroundColors"
+          :iconColor="$props.iconColor"
           :border="$props.iconBorder"
           :icon="$props.icon"
-          :iconColor="$props.color"
           :size="actualImageSize"
         />
         <FSCol
@@ -134,16 +134,16 @@ export default defineComponent({
       required: false,
       default: () => ["124px", "96px", "80px"]
     },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: null
-    },
     icon: {
       type: String as PropType<string>,
       required: false,
       default: "mdi-ab-testing"
     },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: null
+    },
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
       required: false,
@@ -185,7 +185,6 @@ export default defineComponent({
       topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 24));
     }
 
-
     delete slots.title;
 
     return {

package/composables/useBreakpoints.ts

@@ -12,6 +12,11 @@ export const useBreakpoints = () => {
         windowHeight.value = window.innerHeight;
         windowWidth.value = window.innerWidth;
 
+        // Bug in chromium based browsers where window.outerWidth is 0 when tab loads without focus
+        if (!window.document.hasFocus() && window.outerWidth === 0) {
+            windowOuterWidth.value = window.innerWidth;
+            return;
+        }
         windowOuterWidth.value = window.outerWidth;
     };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.94",
+  "version": "1.0.96",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.94",
-    "@dative-gpi/foundation-shared-services": "1.0.94"
+    "@dative-gpi/foundation-shared-domain": "1.0.96",
+    "@dative-gpi/foundation-shared-services": "1.0.96"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "be58c8299c1fc3d18c29089e157f248527da9234"
+  "gitHead": "208043509258652b856a824d62a2a91e98328007"
 }

package/styles/components/fs_agenda.scss

@@ -30,3 +30,7 @@
   width: 100%;
   height: 100%;
 }
+
+.fs-agenda-header-text {
+  text-transform: capitalize !important;
+}

package/styles/components/fs_agenda_hours_row.scss

@@ -1,9 +1,9 @@
 .fs-agenda-hours-row {
-  transform: translateX(calc(-2.4% + 2px));
+  transform: var(--fs-agenda-hours-row-transform);
 }
 
-.fs-agenda-hours-row-text {
-  padding: 0 2px;
+.fs-agenda-hours-row-markers {
+  transform: translateX(calc(-2.4% + 1px)); // 1px is the border width
 }
 
 .fs-agenda-hours-row-marker {

package/styles/components/fs_autocomplete_field.scss

@@ -22,19 +22,6 @@
     }
 }
 
-.fs-autocomplete-field-label {
-    color: var(--fs-autocomplete-field-color);
-}
-
-.fs-autocomplete-field-messages {
-    align-self: stretch;
-    color: var(--fs-autocomplete-field-error-color);
-}
-
-.fs-autocomplete-field-description {
-    color: var(--fs-autocomplete-field-color);
-}
-
 .v-overlay-container > .v-overlay > .v-autocomplete__content {
     box-shadow: 0px 5px 8px 0px #00000029;
     max-width: none !important;

package/styles/components/fs_color_field.scss

@@ -17,8 +17,4 @@
   background: none !important;
   min-width: auto !important;
   width: 100% !important;
-}
-
-.fs-color-field-description {
-  color: var(--fs-color-field-color);
 }

package/styles/components/fs_magic_config_field.scss

@@ -1,5 +1,4 @@
-.fs-magic-config-field > .fs-col:has(.v-switch) {
-    margin: 0 0 6px 0;
+.fs-magic-config-field > :has(.v-switch) {
     align-self: end;
 }
 

package/styles/components/fs_select_field.scss

@@ -21,19 +21,6 @@
     }
 }
 
-.fs-select-field-label {
-    color: var(--fs-select-field-color);
-}
-
-.fs-select-field-messages {
-    align-self: stretch;
-    color: var(--fs-select-field-error-color);
-}
-
-.fs-select-field-description {
-    color: var(--fs-select-field-color);
-}
-
 .v-overlay-container > .v-overlay > .v-select__content > .v-list {
     @extend .fs-hide-y-scrollbar;
 

package/styles/components/fs_wrap_group.scss

@@ -2,10 +2,11 @@
     height: var(--fs-group-height);
     width: var(--fs-group-width);
     max-width: 100%;
-    margin: -1px;
-    padding: 1px;
+    margin: 0 -1px 0 0;
 
     & > .v-slide-group__container > .v-slide-group__content {
+        margin: 0 1px 0 0;
+        
         padding: var(--fs-group-padding);
         gap: var(--fs-group-gap);