@dative-gpi/foundation-shared-components 1.0.128 → 1.0.129

package/components/FSFadeOut.vue

@@ -3,7 +3,6 @@
     class="fs-fade-out"
     ref="fadeOutRef"
     :id="elementId"
-    :style="style"
     @scroll="$emit('scroll', $event); debounceMasks()"
   >
     <slot />
@@ -11,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -65,17 +64,21 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    style:{
+      type: Object,
+      required: false
     }
   },
   emits: ["scroll"],
   setup(props) {
-    const { windowHeight, windowWidth } = useBreakpoints();
+    const { windowHeight, windowWidth, isTouchScreenEnabled } = useBreakpoints();
     const { debounce } = useDebounce();
     const { getColors } = useColors();
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    const fadeOutRef = ref(null);
+    const fadeOutRef = ref<HTMLElement | null>(null);
     const bottomMaskHeight = ref("0px");
     const topMaskHeight = ref("0px");
     const lastScroll = ref(0);
@@ -84,18 +87,21 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
-    const style = computed((): StyleValue => ({
+    const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled);
+
+    const style = computed((): {[index: string]: string} => ({
       "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : "initial",
       "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : "initial",
       "--fs-fade-out-width"             : sizeToVar(props.width),
       "--fs-fade-out-padding"           : sizeToVar(props.padding),
-      "--fs-fade-out-width-offset"      : props.scrollOutside ? '12px' : '0px',
-      "--fs-fade-out-padding-offset"    : props.scrollOutside ? '4px' : '0px',
-      "--fs-fade-out-margin-right"      : props.scrollOutside ? '-12px' : '0px',
+      "--fs-fade-out-width-offset"      : showOutsideScrollbar.value ? '12px' : '0px',
+      "--fs-fade-out-padding-offset"    : showOutsideScrollbar.value ? '4px' : '0px',
+      "--fs-fade-out-margin-right"      : showOutsideScrollbar.value ? '-12px' : '0px',
       "--fs-fade-out-mask-color"        : backgrounds.base,
       "--fs-fade-out-top-mask-height"   : props.disableTopMask ? '0px' : topMaskHeight.value,
       "--fs-fade-out-bottom-mask-height": props.disableBottomMask ? '0px' : bottomMaskHeight.value,
-      "--fs-fade-out-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto'
+      "--fs-fade-out-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto', 
+      ...props.style
     }));
 
     const handleMasks = () => {
@@ -146,6 +152,15 @@ export default defineComponent({
 
     watch([() => windowWidth.value, () => windowHeight.value], debounceMasks);
 
+    watch(() => [style.value, fadeOutRef.value], () => {
+      if(!fadeOutRef.value || !style.value) {
+        return;
+      }
+      for(const key in style.value){
+        fadeOutRef.value.style.setProperty(key, style.value[key])
+      }
+    }, { immediate: true})
+
     return {
       fadeOutRef,
       elementId,

package/package.json

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

package/components/tiles/FSChartTile.vue

@@ -1,73 +0,0 @@
-<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>