@dative-gpi/foundation-shared-components 0.0.27 → 0.0.28

package/components/FSFadeOut.vue

@@ -11,23 +11,28 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref } from "vue";
+import { computed, defineComponent, PropType, ref } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-
-import FSCol from "./FSCol.vue";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({
   name: "FSFadeOut",
-  components: {
-    FSCol
-  },
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+      required: true
+    },
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: "0"
+    },
     maskHeight: {
-      type: Number,
+      type: [String, Number],
       required: false,
-      default: 64
+      default: "64px"
     }
   },
   setup(props) {
@@ -35,23 +40,59 @@ export default defineComponent({
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
-      "--fs-fade-out-mask-color"        : backgrounds.base,
-      "--fs-fade-out-top-mask-height"   : "0px",
-      "--fs-fade-out-bottom-mask-height": `${props.maskHeight}px`
+    const topMaskHeight = ref("0px");
+    const bottomMaskHeight = ref(sizeToVar(props.maskHeight));
+
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-fade-out-height"            : sizeToVar(props.height),
+        "--fs-fade-out-padding"           : sizeToVar(props.padding),
+        "--fs-fade-out-mask-color"        : backgrounds.base,
+        "--fs-fade-out-top-mask-height"   : topMaskHeight.value,
+        "--fs-fade-out-top-mask-top"      : topPadding.value,
+        "--fs-fade-out-bottom-mask-height": bottomMaskHeight.value,
+        "--fs-fade-out-bottom-mask-bottom": bottomPadding.value
+      };
+    });
+
+    const topPadding = computed((): string => {
+      switch (typeof props.padding) {
+        case "number": return sizeToVar(props.padding);
+        default: 
+          const paddings = props.padding.split(" ");
+          switch (paddings.length) {
+            case 0 : return "0px";
+            default: return "-" + sizeToVar(paddings[0]);
+          }
+      }
+    });
+
+    const bottomPadding = computed((): string => {
+      switch (typeof props.padding) {
+        case "number": return sizeToVar(props.padding);
+        default: 
+          const paddings = props.padding.split(" ");
+          switch (paddings.length) {
+            case 0 : return "0px";
+            case 1 :
+            case 2 : return "-" + sizeToVar(paddings[0]);
+            default: return "-" + sizeToVar(paddings[2]);
+          }
+      }
     });
 
     const onScroll = ({ target }): void => {
       if (target.scrollHeight - target.scrollTop - target.clientHeight < 1) {
-        style.value["--fs-fade-out-bottom-mask-height"] = "0px";
-      } else {
-        style.value["--fs-fade-out-bottom-mask-height"] = `${props.maskHeight}px`;
+        bottomMaskHeight.value = "0px";
+      }
+      else {
+        bottomMaskHeight.value = sizeToVar(props.maskHeight);
       }
       if (target.scrollTop === 0) {
-        style.value["--fs-fade-out-top-mask-height"] = "0px";
+        topMaskHeight.value = "0px";
       }
       else {
-        style.value["--fs-fade-out-top-mask-height"] = `${props.maskHeight}px`;
+        topMaskHeight.value = sizeToVar(props.maskHeight);
       }
     }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.27",
+  "version": "0.0.28",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.27",
-    "@dative-gpi/foundation-shared-services": "0.0.27",
+    "@dative-gpi/foundation-shared-domain": "0.0.28",
+    "@dative-gpi/foundation-shared-services": "0.0.28",
     "@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": "b46c226b198f482eee4ca6e63ef2923522bf6e8c"
+  "gitHead": "45b9e0404609c0003f918d847f47b5395152df2a"
 }

package/styles/components/fs_fade_out.scss

@@ -1,6 +1,8 @@
 .fs-fade-out {
     @extend .fs-hide-y-scrollbar;
     
+    padding: var(--fs-fade-out-padding);
+    height: var(--fs-fade-out-height);
     flex-direction: column;
     position: relative;
     display: flex;
@@ -14,8 +16,7 @@
     height: var(--fs-fade-out-top-mask-height);
     min-height: var(--fs-fade-out-top-mask-height);
     width: 100%;
-    top: 0;
-    left: 0;
+    top: var(--fs-fade-out-top-mask-top);
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     background: linear-gradient(to top, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-top-mask-height));
 }
@@ -28,8 +29,7 @@
     height: var(--fs-fade-out-bottom-mask-height);
     min-height: var(--fs-fade-out-bottom-mask-height);
     width: 100%;
-    bottom: 0;
-    left: 0;
+    bottom: var(--fs-fade-out-bottom-mask-bottom);
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     background: linear-gradient(to bottom, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-bottom-mask-height));
 }