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

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,12 +50,12 @@ export default defineComponent({
   },
   props: {
     imageId: {
-      type: [String, null, undefined],
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     imageB64: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -75,7 +75,7 @@ export default defineComponent({
       default: null
     },
     aspectRatio: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -88,8 +88,8 @@ 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",
@@ -99,7 +99,7 @@ export default defineComponent({
       "/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"
@@ -144,7 +144,7 @@ export default defineComponent({
       return undefined;
     });
 
-    const source = computed((): string | null => {
+    const source = computed((): string | undefined => {
       if (props.imageId) {
         return IMAGE_RAW_URL(props.imageId);
       }
@@ -153,17 +153,16 @@ export default defineComponent({
           return `${imageType.value},${imageData.value}`;
         }
       }
-      return null;
     });
 
-    const imageData = computed((): string => {
+    const imageData = computed((): string | null => {
       if (props.imageB64 && props.imageB64.includes(",")) {
         return props.imageB64.split(",")[1];
       }
       return props.imageB64;
     });
 
-    const imageType = computed((): string => {
+    const imageType = computed((): string | null => {
       if (props.imageB64 && props.imageB64.includes(",")) {
         return props.imageB64.split(",")[0];
       }
@@ -174,7 +173,7 @@ export default defineComponent({
           }
         }
       }
-      return "";
+      return null;
     });
 
     const onError = (): void => {
@@ -188,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",

package/components/FSTab.vue

@@ -50,22 +50,22 @@ export default defineComponent({
   },
   props: {
     prependIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     tag: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     appendIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },

package/components/FSTabs.vue

@@ -11,7 +11,7 @@
     v-bind="$attrs"
   >
     <template
-      v-for="(component, index) in getChildren()"
+      v-for="(component, index) in getChildren(undefined)"
       :key="index"
     >
       <component :is="component" />
@@ -46,7 +46,7 @@ export default defineComponent({
     const colors = computed(() => getColors(props.color));
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
+    const style = computed((): { [key: string] : string | undefined } => ({
       "--fs-group-color"                 : darks.base,
       "--fs-group-disabled-color"        : darks.light,
       "--fs-group-hover-background-color": colors.value.light,

package/components/FSTag.vue

@@ -51,7 +51,7 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -77,7 +77,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       switch (props.variant) {
         case "standard": return {
           "--fs-tag-background-color"       : colors.value.light,

package/components/FSText.vue

@@ -70,7 +70,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/FSToggleSet.vue

@@ -133,9 +133,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
     },
     buttonColor: {
       type: String as PropType<ColorBase>,
@@ -277,13 +277,13 @@ export default defineComponent({
 
     const goToStart = () => {
       if (toggleSetRef.value) {
-        toggleSetRef.value.goToStart();
+        (toggleSetRef.value as any).goToStart();
       }
     };
 
     const goToEnd = () => {
       if (toggleSetRef.value) {
-        toggleSetRef.value.goToEnd();
+        (toggleSetRef.value as any).goToEnd();
       }
     };
 

package/components/FSWindow.vue

@@ -4,7 +4,7 @@
     v-bind="$attrs"
   >
     <v-window-item
-      v-for="(component, index) in getChildren()"
+      v-for="(component, index) in getChildren(undefined)"
       :value="value(component, index)"
       :key="index"
     >

package/components/FSWrapGroup.vue

@@ -6,7 +6,7 @@
     v-bind="$attrs"
   >
     <v-slide-group-item
-      v-for="(component, index) in getChildren()"
+      v-for="(component, index) in getChildren(undefined)"
       :key="index"
     >
       <component :is="component" />
@@ -43,7 +43,7 @@ export default defineComponent({
 
     const wrapGroupRef = ref(null);
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
+    const style = computed((): { [key: string] : string | undefined } => ({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
       "--fs-group-color"      : darks.light,

package/components/buttons/FSButtonFile.vue

@@ -48,18 +48,25 @@ export default defineComponent({
   setup(props, { emit }) {
     const { read } = useFiles();
     
-    const input = ref(null);
+    const input = ref<HTMLFormElement | null>(null);
 
     const clear = () => {
-      input.value!.form && input.value!.form.reset();
+      if (input.value) {
+        input.value.form && input.value.form.reset();
+      }
     };
 
     const onClick = () => {
-      input.value!.click();
+      if (input.value) {
+        input.value.click();
+      }
     }
 
     const onInput = () => {
-      const file = input.value!.files && input.value!.files[0];
+      if (!input.value) {
+        return;
+      }
+      const file = input.value.files && input.value.files[0];
       if (!file) {
         return;
       }

package/components/buttons/FSButtonFileIcon.vue

@@ -48,18 +48,25 @@ export default defineComponent({
   setup(props, { emit }) {
     const { read } = useFiles();
 
-    const input = ref(null);
+    const input = ref<HTMLFormElement | null>(null);
 
     const clear = () => {
-      input.value!.form && input.value!.form.reset();
+      if (input.value) {
+        input.value.form && input.value.form.reset();
+      }
     };
 
     const onClick = () => {
-      input.value!.click();
+      if (input.value) {
+        input.value.click();
+      }
     }
 
     const onInput = () => {
-      const file = input.value!.files && input.value!.files[0];
+      if (!input.value) {
+        return;
+      }
+      const file = input.value.files && input.value.files[0];
       if (!file) {
         return;
       }