@dative-gpi/foundation-shared-components 0.0.49 → 0.0.51

package/components/FSEditImage.vue

@@ -0,0 +1,131 @@
+<template>
+  <FSRow
+    width="fill"
+    gap="24px"
+  >
+    <FSCard
+      class="fs-edit-image"
+      :borderRadius="$props.borderRadius"
+      :padding="$props.padding"
+    >
+      <FSImage
+        :borderRadius="$props.borderRadius"
+        :aspectRatio="$props.aspectRatio"
+        :height="$props.height"
+        :imageB64="realSource"
+        :width="$props.width"
+      />
+    </FSCard>
+    <FSCol
+      height="fill"
+      align="bottom-left"
+    >
+      <FSText
+        v-if="fileSelected"
+        font="text-body"
+      >
+        {{ fileSelected.fileName }}
+      </FSText>
+      <FSRow>
+        <FSButtonFileIcon
+          accept="image/*"
+          :readFile="false"
+          @update:modelValue="onUpload"
+        />
+        <FSButtonRemoveIcon
+          @click="onRemove"
+        />
+      </FSRow>
+    </FSCol>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
+import { FileImage } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButtonRemoveIcon from "./buttons/FSButtonRemoveIcon.vue";
+import FSButtonFileIcon from "./buttons/FSButtonFileIcon.vue";
+import FSImage from "./FSImage.vue";
+import FSCard from "./FSCard.vue";
+import FSText from "./FSText.vue";
+
+export default defineComponent({
+  name: "FSEditImage",
+  components: {
+    FSButtonRemoveIcon,
+    FSButtonFileIcon,
+    FSImage,
+    FSCard,
+    FSText
+  },
+  props: {
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: "8px"
+    },
+    width: {
+      type: [String, Number],
+      required: false,
+      default: null
+    },
+    height: {
+      type: [String, Number],
+      required: false,
+      default: null
+    },
+    aspectRatio: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { read } = useFiles();
+
+    const fileSelected = ref<FileImage>({ fileName: "", fileContent: null });
+
+    const realSource = computed(() => {
+      if (fileSelected.value && fileSelected.value.fileName) {
+        return fileSelected.value.fileContent as string;
+      }
+      return props.modelValue;
+    });
+
+    const onUpload = (payload: File) => {
+      read(payload, (content: string) => {
+        fileSelected.value.fileName = payload.name;
+        fileSelected.value.fileContent = content;
+        emit("update:modelValue", content);
+      });
+    };
+
+    const onRemove = () => {
+      fileSelected.value.fileName = "";
+      fileSelected.value.fileContent = null;
+      emit("update:modelValue", null);
+    };
+
+    return {
+      fileSelected,
+      realSource,
+      onUpload,
+      onRemove
+    };
+  }
+});
+</script>

package/components/FSErrorToast.vue

@@ -48,7 +48,7 @@ export default defineComponent({
 
     const errors = getColors(ColorEnum.Error);
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-error-toast-border-radius"   : sizeToVar(props.borderRadius),
         "--fs-error-toast-background-color": errors.base,

package/components/FSFadeOut.vue

@@ -52,7 +52,7 @@ export default defineComponent({
     const bottomMaskHeight = ref("0px");
     const topMaskHeight = ref("0px");
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-fade-out-height"             : sizeToVar(props.height),
         "--fs-fade-out-width"              : sizeToVar(props.width),

package/components/FSForm.vue

@@ -17,7 +17,7 @@ export default defineComponent({
   name: "FSForm",
   props: {
     modelValue: {
-      type: Boolean,
+      type: Boolean as PropType<boolean | null>,
       required: false,
       default: null
     },
@@ -44,9 +44,9 @@ export default defineComponent({
       event.stopImmediatePropagation();
       event.preventDefault();
       submitted.value = true;
-      await formRef.value.validate();
-      emit("update:modelValue", !!formRef.value.isValid);
-      emit("submit", !!formRef.value.isValid);
+      await (formRef.value as any).validate();
+      emit("update:modelValue", !!(formRef.value as any).isValid);
+      emit("submit", !!(formRef.value as any).isValid);
       
     }; 
 

package/components/FSGrid.vue

@@ -85,7 +85,7 @@ export default defineComponent({
 
     const lights = getColors(ColorEnum.Light);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-grid-border-color": lights.dark
       };

package/components/FSImage.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, PropType, ref, watch } from "vue";
 import { decode, isBlurhashValid } from "blurhash";
 
 import { useImageBlurHash } from "@dative-gpi/foundation-shared-services/composables";
@@ -50,7 +50,12 @@ export default defineComponent({
   },
   props: {
     imageId: {
-      type: [String, null, undefined],
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    imageB64: {
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -70,7 +75,7 @@ export default defineComponent({
       default: null
     },
     aspectRatio: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -83,10 +88,18 @@ export default defineComponent({
   setup(props) {
     const { get: fetchBlurHash, entity: blurHash } = useImageBlurHash();
 
-    const imageRef = ref(null);
-    const canvasRef = ref(null);
+    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((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-image-border-radius"   : sizeToVar(props.borderRadius),
         "--fs-image-blurhash-opacity": blurHash.value ? "1" : "0"
@@ -98,7 +111,7 @@ export default defineComponent({
         return props.height;
       }
       if (props.width) {
-        if (typeof(props.width) === "string") {
+        if (typeof (props.width) === "string") {
           return undefined;
         }
         if (props.aspectRatio) {
@@ -117,7 +130,7 @@ export default defineComponent({
         return props.width;
       }
       if (props.height) {
-        if (typeof(props.height) === "string") {
+        if (typeof (props.height) === "string") {
           return undefined;
         }
         if (props.aspectRatio) {
@@ -131,16 +144,41 @@ export default defineComponent({
       return undefined;
     });
 
-    const source = computed((): string | null => {
+    const source = computed((): string | undefined => {
       if (props.imageId) {
         return IMAGE_RAW_URL(props.imageId);
       }
+      else if (props.imageB64) {
+        if (imageType.value && imageData.value) {
+          return `${imageType.value},${imageData.value}`;
+        }
+      }
+    });
+
+    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;
     });
 
     const onError = (): void => {
       if (props.imageId) {
-        fetchBlurHash(props.imageId);   
+        fetchBlurHash(props.imageId);
       }
     };
 
@@ -149,8 +187,8 @@ export default defineComponent({
         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);
+            const pixels = decode(blurHash.value.blurHash, (imageRef.value as any).$el.clientWidth, (imageRef.value as any).$el.clientHeight);
+            const imageData = ctx.createImageData((imageRef.value as any).$el.clientWidth, (imageRef.value as any).$el.clientHeight);
             imageData.data.set(pixels);
             ctx.putImageData(imageData, 0, 0);
           }

package/components/FSLabel.vue

@@ -80,7 +80,7 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       switch (props.variant) {
         case "base": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),

package/components/FSLink.vue

@@ -79,7 +79,7 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       switch (props.variant) {
         case "base": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),

package/components/FSLoader.vue

@@ -48,7 +48,7 @@ export default defineComponent({
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-loader-background-color": backgrounds.base,
         "--fs-loader-border-radius"   : ["chip"].includes(props.variant) ? "50px" : sizeToVar(props.borderRadius),

package/components/FSOptionGroup.vue

@@ -146,9 +146,9 @@ export default defineComponent({
       default: null
     },
     modelValue: {
-      type: [Array, String, Number] as PropType<(string | number)[] | string | number>,
+      type: [Array, String, Number] as PropType<(string | number)[] | string | number | null>,
       required: false,
-      default: false
+      default: null
     },
     optionColor: {
       type: String as PropType<ColorBase>,
@@ -195,7 +195,7 @@ export default defineComponent({
 
     const firstChild = getFirstChild("item");
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
           "--fs-option-group-border-size"  : props.border ? "1px" : "0",
           "--fs-option-group-border-radius": sizeToVar(props.borderRadius),

package/components/FSOptionItem.vue

@@ -63,22 +63,22 @@ export default defineComponent({
   },
   props: {
     prependIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     label: {
-      type: [String, Function],
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     appendIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     icon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },

package/components/FSPagination.vue

@@ -63,7 +63,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       switch (props.color) {
         case ColorEnum.Light:
         case ColorEnum.Dark: return {

package/components/FSRadio.vue

@@ -73,12 +73,12 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -97,7 +97,7 @@ export default defineComponent({
       default: ColorEnum.Primary
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -122,7 +122,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-radio-cursor"     : "default",

package/components/FSRadioGroup.vue

@@ -1,8 +1,8 @@
 <template>
   <FSCol width="hug">
     <FSRadio
-      v-for="item in $props.values"
-      :key="item.value"
+      v-for="(item, index) in $props.values"
+      :key="index"
       :label="item.label"
       :description="item.description"
       :selected="isSelected(item.value)"
@@ -30,7 +30,7 @@ export default defineComponent({
   },
   props: {
     values: {
-      type: Array as PropType<{ value: String | Boolean | Number, label?: String, description?: string }[]>,
+      type: Array as PropType<{ value: string | boolean | number, label?: string, description?: string }[]>,
       required: true,
       default: false
     },

package/components/FSRow.vue

@@ -48,7 +48,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => ({
+    const style = computed((): { [key: string] : string | undefined } => ({
       "--fs-row-flex-wrap": props.wrap ? "wrap" : "nowrap",
       "--fs-row-padding"  : sizeToVar(props.padding),
       "--fs-row-gap"      : sizeToVar(props.gap),

package/components/FSSlideGroup.vue

@@ -20,7 +20,7 @@
     </template>
     <template #default>
       <v-slide-group-item
-        v-for="(component, index) in getChildren()"
+        v-for="(component, index) in getChildren(undefined)"
         :key="index"
       >
         <component :is="component" />
@@ -87,9 +87,9 @@ export default defineComponent({
 
     const darks = getColors(ColorEnum.Dark);
 
-    const slideGroupRef = ref(null);
+    const slideGroupRef = ref<HTMLElement | null>(null);
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
+    const style = computed((): { [key: string] : string | undefined } => ({
       "--fs-group-arrows-width": props.dash ? "52px" : "32px",
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
@@ -99,31 +99,31 @@ export default defineComponent({
 
     const goToStart = () => {
       if (slideGroupRef.value) {
-        slideGroupRef.value.scrollOffset = 0;
+        (slideGroupRef.value as any).scrollOffset = 0;
       }
     };
 
     const goToPrev = () => {
       if (slideGroupRef.value) {
-        slideGroupRef.value.scrollOffset = Math.max(0, slideGroupRef.value.scrollOffset - props.speed);
+        (slideGroupRef.value as any).scrollOffset = Math.max(0, (slideGroupRef.value as any).scrollOffset - props.speed);
       }
     };
 
     const goToEnd = () => {
       if (slideGroupRef.value) {
-        const contentSize = slideGroupRef.value.$el.children[1].children[0].clientWidth;
-        const containerSize = slideGroupRef.value.$el.clientWidth;
+        const contentSize = (slideGroupRef.value as any).$el.children[1].children[0].clientWidth;
+        const containerSize = (slideGroupRef.value as any).$el.clientWidth;
         const arrowsOffset = props.dash ? 104 : 64;
-        slideGroupRef.value.scrollOffset = (contentSize - containerSize + arrowsOffset);
+        (slideGroupRef.value as any).scrollOffset = (contentSize - containerSize + arrowsOffset);
       }
     };
 
     const goToNext = () => {
       if (slideGroupRef.value) {
-        const contentSize = slideGroupRef.value.$el.children[1].children[0].clientWidth;
-        const containerSize = slideGroupRef.value.$el.clientWidth;
+        const contentSize = (slideGroupRef.value as any).$el.children[1].children[0].clientWidth;
+        const containerSize = (slideGroupRef.value as any).$el.clientWidth;
         const arrowsOffset = props.dash ? 104 : 64;
-        slideGroupRef.value.scrollOffset = Math.min(contentSize - containerSize + arrowsOffset, slideGroupRef.value.scrollOffset + props.speed);
+        (slideGroupRef.value as any).scrollOffset = Math.min(contentSize - containerSize + arrowsOffset, (slideGroupRef.value as any).scrollOffset + props.speed);
       }
     };
 

package/components/FSSlider.vue

@@ -70,17 +70,17 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     modelValue: {
-      type: [String, Number],
+      type: [String, Number] as PropType<string | number | null>,
       required: false,
       default: null
     },
@@ -107,7 +107,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-slider-cursor"     : "default",

package/components/FSSpan.vue

@@ -56,7 +56,7 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-span-line-clamp": props.lineClamp.toString()
       };

package/components/FSSubmitDialog.vue

@@ -78,27 +78,27 @@ export default defineComponent({
       default: "auto"
     },
     title: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     subtitle: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     leftButtonPrependIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     leftButtonLabel: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     leftButtonAppendIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -108,17 +108,17 @@ export default defineComponent({
       default: "standard"
     },
     rightButtonPrependIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     rightButtonLabel: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     rightButtonAppendIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },

package/components/FSSwitch.vue

@@ -62,12 +62,12 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -82,7 +82,7 @@ export default defineComponent({
       default: ColorEnum.Primary
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -108,7 +108,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",