@dative-gpi/foundation-shared-components 0.0.44 → 0.0.45

package/components/FSCheckbox.vue

@@ -102,7 +102,7 @@ export default defineComponent({
       if (!props.editable) {
         return {
           "--fs-checkbox-cursor"        : "default",
-          "--fs-checkbox-checkbox-color": lights.dark,
+          "--fs-checkbox-checkbox-color": (props.modelValue || props.indeterminate) ? colors.value.light : lights.base,
           "--fs-checkbox-color"         : lights.dark
         };
       }

package/components/FSFadeOut.vue

@@ -12,9 +12,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, PropType, ref } from "vue";
+import { computed, defineComponent, onMounted, PropType, ref, watch } from "vue";
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -42,24 +42,26 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { windowWidth } = useBreakpoints();
+    const { debounce } = useDebounce();
     const { getColors } = useColors();
 
     const backgrounds = getColors(ColorEnum.Background);
 
     const fadeOutRef = ref(null);
-    const topMaskHeight = ref("0px");
     const bottomMaskHeight = ref("0px");
+    const topMaskHeight = ref("0px");
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       return {
-        "--fs-fade-out-height"            : sizeToVar(props.height),
-        "--fs-fade-out-width"             : sizeToVar(props.width),
-        "--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
+        "--fs-fade-out-height"             : sizeToVar(props.height),
+        "--fs-fade-out-width"              : sizeToVar(props.width),
+        "--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
       };
     });
 
@@ -107,7 +109,16 @@ export default defineComponent({
       }
     });
 
-    const onScroll = ({ target }): void => {
+    const onScroll = ({ target }): void => debounce(() => {
+      const currentTopMaskHeight = target.children[0].clientHeight;
+      const currentBottomMaskHeight = target.children[target.children.length - 1].clientHeight;
+      const contentHeight = target.scrollHeight - currentTopMaskHeight - currentBottomMaskHeight;
+
+      if (target.clientHeight >= contentHeight) {
+        bottomMaskHeight.value = "0px";
+        topMaskHeight.value = "0px";
+        return;
+      }
       if (target.scrollHeight - target.scrollTop - target.clientHeight < 1) {
         bottomMaskHeight.value = "0px";
       }
@@ -120,7 +131,28 @@ export default defineComponent({
       else {
         topMaskHeight.value = sizeToVar(props.maskHeight);
       }
-    }
+    }, 25);
+
+    const onResize = (): void => debounce(() => {
+      if (fadeOutRef.value) {
+        const currentTopMaskHeight = fadeOutRef.value.children[0].clientHeight;
+        const currentBottomMaskHeight = fadeOutRef.value.children[fadeOutRef.value.children.length - 1].clientHeight;
+        const contentHeight = fadeOutRef.value.scrollHeight - currentTopMaskHeight - currentBottomMaskHeight;
+
+        if (fadeOutRef.value.clientHeight < contentHeight) {
+          if (fadeOutRef.value.scrollHeight - fadeOutRef.value.scrollTop - fadeOutRef.value.clientHeight > 0) {
+            bottomMaskHeight.value = sizeToVar(props.maskHeight);
+          }
+          if (fadeOutRef.value.scrollTop > 0) {
+            topMaskHeight.value = sizeToVar(props.maskHeight);
+          }
+        }
+        else {
+          bottomMaskHeight.value = "0px";
+          topMaskHeight.value = "0px";
+        }
+      }
+    }, 200);
 
     onMounted((): void => {
       if (fadeOutRef.value) {
@@ -130,6 +162,8 @@ export default defineComponent({
       }
     });
 
+    watch(() => windowWidth.value, onResize);
+
     return {
       fadeOutRef,
       style,

package/components/FSImage.vue

@@ -1,28 +1,44 @@
 <template>
   <v-img
     class="fs-image"
+    ref="imageRef"
     :height="computedHeight"
     :width="computedWidth"
     :cover="$props.cover"
     :style="style"
     :src="source"
+    @error="onError"
     v-bind="$attrs"
   >
     <template #placeholder>
       <FSLoader
-        class="fs-load-image"
+        class="fs-image-load"
         height="100%"
         width="100%"
         :borderRadius="$props.borderRadius"
       />
     </template>
+    <template #error>
+      <FSLoader
+        v-if="!blurHash"
+        class="fs-image-load"
+        height="100%"
+        width="100%"
+        :borderRadius="$props.borderRadius"
+      />
+      <canvas
+        ref="canvasRef"
+      />
+    </template>
   </v-img>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, watch } from "vue";
+import { computed, defineComponent, ref, watch } from "vue";
+import { decode, isBlurhashValid } from "blurhash";
 
-import { useImageRaw, useImageBlurHash } from "@dative-gpi/foundation-shared-services/composables";
+import { useImageBlurHash } from "@dative-gpi/foundation-shared-services/composables";
+import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config/urls";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSLoader from "./FSLoader.vue";
@@ -65,12 +81,15 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { getting: fetchingRaw, get: fetchRaw, entity: image } = useImageRaw();
-    const { getting: fetchingBlurHash, get: fetchBlurHash, entity: blurHash } = useImageBlurHash();
+    const { get: fetchBlurHash, entity: blurHash } = useImageBlurHash();
+
+    const imageRef = ref(null);
+    const canvasRef = ref(null);
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       return {
-        "--fs-image-border-radius": sizeToVar(props.borderRadius)
+        "--fs-image-border-radius"   : sizeToVar(props.borderRadius),
+        "--fs-image-blurhash-opacity": blurHash.value ? "1" : "0"
       }
     });
 
@@ -113,44 +132,41 @@ export default defineComponent({
     });
 
     const source = computed((): string | null => {
-      if (fetchingRaw.value) {
-        return null;
-      }
-      if (image.value) {
-        return image.value;
-      }
-      if (fetchingBlurHash.value) {
-        return null;
-      }
-      if (blurHash.value) {
-        return blurHash.value.blurHash;
+      if (props.imageId) {
+        return IMAGE_RAW_URL(props.imageId);
       }
       return null;
     });
 
-    onMounted(() => {
-      fetch();
-    });
-
-    watch(() => props.imageId, () => {
-      fetch();
-    });
-
-    const fetch = async () => {
-      if (!props.imageId) {
-        return;
+    const onError = (): void => {
+      if (props.imageId) {
+        fetchBlurHash(props.imageId);   
       }
-      await fetchRaw(props.imageId);
-      if (!image.value) {
-        await fetchBlurHash(props.imageId);
+    };
+
+    watch(() => blurHash.value, () => {
+      if (canvasRef.value && imageRef.value) {
+        if (blurHash.value && isBlurhashValid(blurHash.value.blurHash).result) {
+          const ctx = canvasRef.value.getContext("2d");
+          if (ctx) {
+            const pixels = decode(blurHash.value.blurHash, imageRef.value.$el.clientWidth, imageRef.value.$el.clientHeight);
+            const imageData = ctx.createImageData(imageRef.value.$el.clientWidth, imageRef.value.$el.clientHeight);
+            imageData.data.set(pixels);
+            ctx.putImageData(imageData, 0, 0);
+          }
+        }
       }
-    }
+    });
 
     return {
       computedHeight,
       computedWidth,
+      canvasRef,
+      imageRef,
+      blurHash,
       source,
-      style
+      style,
+      onError
     };
   }
 });

package/components/FSRadio.vue

@@ -96,7 +96,7 @@ export default defineComponent({
       if (!props.editable) {
         return {
           "--fs-radio-cursor"     : "default",
-          "--fs-radio-radio-color": lights.dark,
+          "--fs-radio-radio-color": props.selected ? colors.value.light : lights.base,
           "--fs-radio-color"      : lights.dark
         };
       }

package/components/FSSwitch.vue

@@ -99,7 +99,7 @@ export default defineComponent({
         return {
           "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",
           "--fs-switch-cursor"     : "default",
-          "--fs-switch-track-color": lights.dark,
+          "--fs-switch-track-color": props.modelValue ? colors.value.light : lights.base,
           "--fs-switch-thumb-color": backgrounds.base,
           "--fs-switch-color"      : lights.dark
         };
@@ -107,7 +107,7 @@ export default defineComponent({
       return {
         "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",
         "--fs-switch-cursor"     : "pointer",
-        "--fs-switch-track-color": props.modelValue ? colors.value.base : darks.base,
+        "--fs-switch-track-color": props.modelValue ? colors.value.base : lights.dark,
         "--fs-switch-thumb-color": backgrounds.base,
         "--fs-switch-color"      : darks.base
       };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.44",
+  "version": "0.0.45",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.44",
-    "@dative-gpi/foundation-shared-services": "0.0.44",
+    "@dative-gpi/foundation-shared-domain": "0.0.45",
+    "@dative-gpi/foundation-shared-services": "0.0.45",
     "@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": "485812f109093aa8e931f04fdcd1fd54f46f66fc"
+  "gitHead": "4af778193801da465615d1718cc5562e3297d651"
 }

package/styles/components/fs_fade_out.scss

@@ -12,25 +12,21 @@
 .fs-fade-out-top {
     pointer-events: none;
     position: sticky;
-    display: flex;
     z-index: 10;
-    height: var(--fs-fade-out-top-mask-height);
     min-height: var(--fs-fade-out-top-mask-height);
     width: 100%;
     top: var(--fs-fade-out-top-mask-top);
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.14s 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));
 }
 
 .fs-fade-out-bottom {
     pointer-events: none;
     position: sticky;
-    display: flex;
     z-index: 10;
-    height: var(--fs-fade-out-bottom-mask-height);
     min-height: var(--fs-fade-out-bottom-mask-height);
     width: 100%;
     bottom: var(--fs-fade-out-bottom-mask-bottom);
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.14s 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));
 }

package/styles/components/fs_image.scss

@@ -1,7 +1,3 @@
-.fs-load-image {
-    border-radius: var(--fs-image-border-radius);
-}
-
 .fs-image {
     border-radius: var(--fs-image-border-radius);
 

package/styles/components/fs_switch.scss

@@ -42,6 +42,7 @@
     @extend .fs-switch-size;
 
     background-color: var(--fs-switch-track-color) !important;
+    opacity: 1;
 }
 
 .v-switch__thumb {