@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/FSImage.vue

@@ -1,229 +1,57 @@
 <template>
-  <v-img
-    class="fs-image"
-    ref="imageRef"
-    :height="computedHeight"
-    :width="computedWidth"
-    :cover="$props.cover"
-    :src="realSource"
-    :style="style"
+  <FSImageUI
+    :blurHash="image"
+    :source="source"
     @error="onError"
     v-bind="$attrs"
-  >
-    <template
-      #placeholder
-    >
-      <FSLoader
-        v-if="$props.imageId"
-        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 type { PropType} from "vue";
-import { computed, defineComponent, ref, watch } from "vue";
-import { decode, isBlurhashValid } from "blurhash";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { IMAGE_RAW_EXTENSION_URL, IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config/urls";
-import { useExtensionJwt, useImageBlurHash } from "@dative-gpi/foundation-shared-services/composables";
-import { sizeToVar, varToSize } from "@dative-gpi/foundation-shared-components/utils";
+import { IMAGE_THUMBNAIL_URL, IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config/urls";
+import { useAppAuthToken, useImage } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSLoader from "./FSLoader.vue";
+import FSImageUI from "./FSImageUI.vue";
 
 export default defineComponent({
   name: "FSImage",
   components: {
-    FSLoader
+    FSImageUI
   },
   props: {
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: null
-    },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: null
-    },
     imageId: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    imageB64: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    source: {
-      type: String as PropType<string | null>,
+    thumbnail: {
+      type: Boolean as PropType<boolean>,
       required: false,
-      default: null
-    },
-    aspectRatio: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    borderRadius: {
-      type: [String, Number],
-      required: false,
-      default: "4px"
-    },
-    cover: {
-      type: Boolean,
-      required: false,
-      default: true
+      default: false
     }
   },
   setup(props) {
-    const { fetch: fetchBlurHash, entity: blurHash } = useImageBlurHash();
-    const { jwt } = useExtensionJwt();
-
-    const imageRef = ref<HTMLFormElement | null>(null);
-    const canvasRef = ref<HTMLCanvasElement | null>(null);
-
-    const signatures = ref<{ [key: string]: string }>({
-      JVBERi0    : "application/pdf",
-      R0lGODdh   : "image/gif",
-      R0lGODlh   : "image/gif",
-      iVBORw0KGgo: "image/png",
-      "/9j/"     : "image/jpg",
-    });
+    const { get: getImage, entity: image } = useImage();
+    const { authToken } = useAppAuthToken();
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-image-border-radius"   : sizeToVar(props.borderRadius),
-        "--fs-image-blurhash-opacity": blurHash.value ? "1" : "0"
+    const source = computed(() => {
+      if (props.thumbnail) {
+        return props.imageId ? IMAGE_THUMBNAIL_URL(props.imageId, authToken.value) : null;
       }
-    });
-
-    const computedHeight = computed((): string | undefined => {
-      if (props.height) {
-        return sizeToVar(props.height);
-      }
-      if (props.width) {
-        if (typeof (props.width) === "string") {
-          return undefined;
-        }
-        if (props.aspectRatio) {
-          const split = props.aspectRatio.split('/');
-          if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
-            return sizeToVar(varToSize(props.width) * (parseFloat(split[1]) / parseFloat(split[0])));
-          }
-        }
-        return sizeToVar(props.width);
-      }
-      return undefined;
-    });
-
-    const computedWidth = computed((): string | undefined => {
-      if (props.width) {
-        return sizeToVar(props.width);
-      }
-      if (props.height) {
-        if (typeof (props.height) === "string") {
-          return undefined;
-        }
-        if (props.aspectRatio) {
-          const split = props.aspectRatio.split('/');
-          if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
-            return sizeToVar(varToSize(props.height) * (parseFloat(split[0]) / parseFloat(split[1])));
-          }
-        }
-        return sizeToVar(props.height);
-      }
-      return undefined;
-    });
-
-    const realSource = computed((): string | null => {
-      if (props.imageB64) {
-        if (imageType.value && imageData.value) {
-          return `${imageType.value},${imageData.value}`;
-        }
-      }
-      else if (props.imageId) {
-        if (jwt.value) {
-          return IMAGE_RAW_EXTENSION_URL(props.imageId, jwt.value);
-        }
-        return IMAGE_RAW_URL(props.imageId);
-      }
-      return props.source;
-    });
-
-    const imageData = computed((): string | null => {
-      if (props.imageB64 && props.imageB64.includes(",")) {
-        return props.imageB64.split(",")[1];
-      }
-      return props.imageB64;
-    });
-
-    const imageType = computed((): string | null => {
-      if (props.imageB64 && props.imageB64.includes(",")) {
-        return props.imageB64.split(",")[0];
-      }
-      if (props.imageB64) {
-        for (const s in signatures.value) {
-          if (props.imageB64.startsWith(s)) {
-            return `data:${signatures.value[s]};base64`;
-          }
-        }
-      }
-      return null;
+      return props.imageId ? IMAGE_RAW_URL(props.imageId, authToken.value) : null;
     });
 
     const onError = (): void => {
       if (props.imageId) {
-        fetchBlurHash(props.imageId);
+        getImage(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 width = (imageRef.value as any).$el.clientWidth;
-            const height = (imageRef.value as any).$el.clientHeight;
-            const pixels = decode(blurHash.value.blurHash, width, height);
-            const imageData = ctx.createImageData(width, height);
-            canvasRef.value.width = width;
-            canvasRef.value.height = height;
-            imageData.data.set(pixels);
-            ctx.putImageData(imageData, 0, 0);
-          }
-        }
-      }
-    });
-
     return {
-      computedHeight,
-      computedWidth,
-      realSource,
-      canvasRef,
-      imageRef,
-      blurHash,
-      style,
+      source,
+      image,
       onError
     };
   }

package/components/FSImageCard.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import FSClickable from "./FSClickable.vue";
 import FSSpan from "./FSSpan.vue";
@@ -60,7 +60,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const style = computed(() => ({
+    const style = computed((): StyleValue => ({
       "--fs-image-card-background": `url(${props.src})`
     }));
 

package/components/FSImageUI.vue

@@ -0,0 +1,212 @@
+<template>
+  <v-img
+    class="fs-image"
+    ref="imageRef"
+    :height="computedHeight"
+    :width="computedWidth"
+    :cover="$props.cover"
+    :src="realSource"
+    :style="style"
+    @error="$emit('error')"
+    v-bind="$attrs"
+  >
+    <template
+      #placeholder
+    >
+      <FSLoader
+        v-if="$props.loading"
+        class="fs-image-load"
+        height="100%"
+        width="100%"
+        :borderRadius="$props.borderRadius"
+      />
+    </template>
+    <template
+      #error
+    >
+      <FSLoader
+        v-if="!$props.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, type PropType, ref, type StyleValue, watch } from "vue";
+import { decode, isBlurhashValid } from "blurhash";
+
+import { sizeToVar, varToSize } from "@dative-gpi/foundation-shared-components/utils";
+import { type ImageDetails } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSLoader from "./FSLoader.vue";
+
+export default defineComponent({
+  name: "FSImageUI",
+  components: {
+    FSLoader
+  },
+  props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    aspectRatio: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: 1
+    },
+    imageB64: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    source: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    blurHash: {
+      type: Object as PropType<ImageDetails | null>,
+      required: false,
+      default: null
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    },
+    cover: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props) {
+
+    const imageRef = ref<HTMLFormElement | null>(null);
+    const canvasRef = ref<HTMLCanvasElement | null>(null);
+
+    const signatures = ref<{ [key: string]: string }>({
+      JVBERi0    : "application/pdf",
+      R0lGODdh   : "image/gif",
+      R0lGODlh   : "image/gif",
+      iVBORw0KGgo: "image/png",
+      "/9j/"     : "image/jpg",
+    });
+
+    const style = computed((): StyleValue => ({
+      "--fs-image-border-radius"   : sizeToVar(props.borderRadius),
+      "--fs-image-blurhash-opacity": props.blurHash ? "1" : "0"
+    }));
+
+    const computedHeight = computed((): string | undefined => {
+      if (props.height) {
+        return sizeToVar(props.height);
+      }
+      if (props.width) {
+        if (typeof (props.width) === "string") {
+          return undefined;
+        }
+        if (props.aspectRatio) {
+          return sizeToVar(varToSize(props.width) / props.aspectRatio);
+        }
+        return sizeToVar(props.width);
+      }
+      return undefined;
+    });
+
+    const computedWidth = computed((): string | undefined => {
+      if (props.width) {
+        return sizeToVar(props.width);
+      }
+      if (props.height) {
+        if (typeof (props.height) === "string") {
+          return undefined;
+        }
+        if (props.aspectRatio) {
+          return sizeToVar(varToSize(props.height) * props.aspectRatio);
+        }
+        return sizeToVar(props.height);
+      }
+      return undefined;
+    });
+
+    const realSource = computed((): string | undefined => {
+      if (props.imageB64) {
+        if (imageType.value && imageData.value) {
+          return `${imageType.value},${imageData.value}`;
+        }
+      }
+      else if (props.source) {
+        return props.source;
+      }
+    });
+
+    const imageData = computed((): string | null => {
+      if (props.imageB64 && props.imageB64.includes(",")) {
+        return props.imageB64.split(",")[1];
+      }
+      return props.imageB64;
+    });
+
+    const imageType = computed((): string | null => {
+      if (props.imageB64 && props.imageB64.includes(",")) {
+        return props.imageB64.split(",")[0];
+      }
+      if (props.imageB64) {
+        for (const s in signatures.value) {
+          if (props.imageB64.startsWith(s)) {
+            return `data:${signatures.value[s]};base64`;
+          }
+        }
+      }
+      return null;
+    });
+
+    watch(() => props.blurHash, () => {
+      if (canvasRef.value && imageRef.value) {
+        if (props.blurHash && isBlurhashValid(props.blurHash.blurHash).result) {
+          const ctx = canvasRef.value.getContext("2d");
+          if (ctx) {
+            const width = (imageRef.value as any).$el.clientWidth;
+            const height = (imageRef.value as any).$el.clientHeight;
+            const pixels = decode(props.blurHash.blurHash, width, height);
+            const imageData = ctx.createImageData(width, height);
+            canvasRef.value.width = width;
+            canvasRef.value.height = height;
+            imageData.data.set(pixels);
+            ctx.putImageData(imageData, 0, 0);
+          }
+        }
+      }
+    });
+
+    return {
+      computedHeight,
+      computedWidth,
+      realSource,
+      canvasRef,
+      imageRef,
+      style
+    };
+  }
+});
+</script>

package/components/FSLabel.vue

@@ -16,12 +16,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSLoader from "./FSLoader.vue";
 
@@ -37,7 +35,7 @@ export default defineComponent({
       default: null
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },
@@ -68,21 +66,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const classes = computed((): string[] => {
-      const classNames = ["fs-label", props.font];
-      if (!slots.default) {
-        classNames.push("fs-span-pre-wrap");
-      }
-      if (props.lineClamp > 1) {
-        classNames.push("fs-span-line-clamp");
-      }
-      else if (props.ellipsis) {
-        classNames.push("fs-span-ellipsis");
-      }
-      return classNames;
-    });
-
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
         case "base": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
@@ -99,6 +83,20 @@ export default defineComponent({
       }
     });
 
+    const classes = computed((): string[] => {
+      const classNames = ["fs-label", props.font];
+      if (!slots.default) {
+        classNames.push("fs-span-pre-wrap");
+      }
+      if (props.lineClamp > 1) {
+        classNames.push("fs-span-line-clamp");
+      }
+      else if (props.ellipsis) {
+        classNames.push("fs-span-ellipsis");
+      }
+      return classNames;
+    });
+
     return {
       classes,
       style

package/components/FSLink.vue

@@ -25,13 +25,11 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
-import type { RouteLocation } from "vue-router";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { type RouteLocation } from "vue-router";
 
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSLink",
@@ -52,7 +50,7 @@ export default defineComponent({
       default: null
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },
@@ -83,21 +81,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const classes = computed((): string[] => {
-      const classNames = ["fs-link", props.font];
-      if (!slots.default) {
-        classNames.push("fs-span-pre-wrap");
-      }
-      if (props.lineClamp > 1) {
-        classNames.push("fs-span-line-clamp");
-      }
-      else if (props.ellipsis) {
-        classNames.push("fs-span-ellipsis");
-      }
-      return classNames;
-    });
-
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
         case "base": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
@@ -114,6 +98,20 @@ export default defineComponent({
       }
     });
 
+    const classes = computed((): string[] => {
+      const classNames = ["fs-link", props.font];
+      if (!slots.default) {
+        classNames.push("fs-span-pre-wrap");
+      }
+      if (props.lineClamp > 1) {
+        classNames.push("fs-span-line-clamp");
+      }
+      else if (props.ellipsis) {
+        classNames.push("fs-span-ellipsis");
+      }
+      return classNames;
+    });
+
     return {
       classes,
       style

package/components/FSLoader.vue

@@ -7,8 +7,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -33,7 +32,7 @@ export default defineComponent({
       default: "0"
     },
     variant: {
-      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "standard"
     },
@@ -49,15 +48,13 @@ export default defineComponent({
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-loader-background-color": backgrounds.base,
-        "--fs-loader-border-radius"   : ["chip"].includes(props.variant) ? "50px" : sizeToVar(props.borderRadius),
-        "--fs-loader-padding"         : sizeToVar(props.padding),
-        "--fs-loader-height"          : sizeToVar(getHeight.value),
-        "--fs-loader-width"           : sizeToVar(getWidth.value)
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-loader-background-color": backgrounds.base,
+      "--fs-loader-border-radius"   : ["chip"].includes(props.variant) ? "50px" : sizeToVar(props.borderRadius),
+      "--fs-loader-padding"         : sizeToVar(props.padding),
+      "--fs-loader-height"          : sizeToVar(getHeight.value),
+      "--fs-loader-width"           : sizeToVar(getWidth.value)
+    }));
 
     const getHeight = computed((): string | number => {
       switch (props.variant) {
@@ -72,8 +69,7 @@ export default defineComponent({
         case "text-h4"       : return isMobileSized.value ? "16px" : "20px";
         case "text-body"     :
         case "text-button"   : return isMobileSized.value ? "14px" : "16px";
-        case "text-overline" :
-        case "text-underline": return "16px";
+        case "text-overline" : return "16px";
       }
     });