sprintify-ui 0.11.28 → 0.11.30

package/dist/types/components/BaseAvatar.vue.d.ts

@@ -1,10 +1,26 @@
 import { PropType } from 'vue';
 import { User } from '@/types/User';
 import { RouteLocationRaw } from 'vue-router';
+type AvatarUserInput = Partial<User> & {
+    name?: string;
+    label?: string;
+};
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     user: {
-        required: true;
-        type: PropType<User>;
+        default: undefined;
+        type: PropType<AvatarUserInput>;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    email: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    src: {
+        default: undefined;
+        type: StringConstructor;
     };
     size: {
         default: string;
@@ -32,8 +48,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     user: {
-        required: true;
-        type: PropType<User>;
+        default: undefined;
+        type: PropType<AvatarUserInput>;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    email: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    src: {
+        default: undefined;
+        type: StringConstructor;
     };
     size: {
         default: string;
@@ -61,9 +89,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     class: string;
+    email: string;
     to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
     size: string;
+    name: string;
     tooltip: boolean;
+    user: AvatarUserInput;
+    src: string;
     showDetails: boolean;
     detailsPosition: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/utils/index.d.ts

@@ -1,8 +1,9 @@
 import toHumanList from './toHumanList';
 import fileSizeFormat from './fileSizeFormat';
 import resizeImageFromURI from './resizeImageFromURI';
+import resizeImageForUpload from './resizeImageForUpload';
 import { disableScroll, enableScroll } from './scrollPreventer';
 import { blobToBase64, validateBase64, base64ToBlob } from './blob';
 import { getColorConfig } from './colors';
 import { getInitials, getAvatarColor } from './avatar';
-export { toHumanList, fileSizeFormat, disableScroll, enableScroll, resizeImageFromURI, blobToBase64, validateBase64, base64ToBlob, getColorConfig, getInitials, getAvatarColor, };
+export { toHumanList, fileSizeFormat, disableScroll, enableScroll, resizeImageFromURI, resizeImageForUpload, blobToBase64, validateBase64, base64ToBlob, getColorConfig, getInitials, getAvatarColor, };

package/dist/types/utils/resizeImageForUpload.d.ts

@@ -0,0 +1,7 @@
+type ResizeImageForUploadOptions = {
+    maxBytes: number;
+    outputMimeType?: string;
+    quality?: number;
+};
+export default function resizeImageForUpload(file: Blob, options: ResizeImageForUploadOptions): Promise<Blob>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.28",
+  "version": "0.11.30",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseAvatar.vue

@@ -1,6 +1,5 @@
 <template>
   <BaseTooltip
-    v-if="user"
     :visible="tooltip"
     :text="tooltipText"
     :class="classInternal"
@@ -11,8 +10,8 @@
       class="flex items-center"
     >
       <img
-        v-if="user.avatar_url"
-        :src="user.avatar_url"
+        v-if="resolvedUrl"
+        :src="resolvedUrl"
         :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
         class="shrink-0 block overflow-hidden rounded-full object-cover object-center"
       >
@@ -54,10 +53,10 @@
         }"
       >
         <div class="truncate">
-          {{ user.full_name }}
+          {{ resolvedName }}
         </div>
         <div class="truncate opacity-50">
-          {{ user.email }}
+          {{ resolvedEmail }}
         </div>
       </div>
     </component>
@@ -76,10 +75,27 @@ defineOptions({
   inheritAttrs: false,
 })
 
+type AvatarUserInput = Partial<User> & {
+  name?: string;
+  label?: string;
+};
+
 const props = defineProps({
   user: {
-    required: true,
-    type: Object as PropType<User>,
+    default: undefined,
+    type: Object as PropType<AvatarUserInput>,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  email: {
+    default: undefined,
+    type: String,
+  },
+  src: {
+    default: undefined,
+    type: String,
   },
   size: {
     default: 'base',
@@ -107,8 +123,23 @@ const props = defineProps({
   },
 });
 
-const initials = computed(() => getInitials(props.user?.full_name || ''));
-const avatarColor = computed(() => getAvatarColor(props.user?.full_name || '', props.user?.email));
+const resolvedName = computed(() => {
+  return (
+    [props.name, props.user?.name, props.user?.full_name, props.user?.label]
+      .find((value) => Boolean(value && value.trim()))?.trim() || ''
+  );
+});
+
+const resolvedEmail = computed(() => {
+  return (props.email || props.user?.email || '').trim();
+});
+
+const resolvedUrl = computed(() => {
+  return (props.src || props.user?.avatar_url || '').trim();
+});
+
+const initials = computed(() => getInitials(resolvedName.value));
+const avatarColor = computed(() => getAvatarColor(resolvedName.value, resolvedEmail.value));
 
 const classInternal = computed(() => {
   return twMerge(
@@ -125,11 +156,15 @@ const tooltipText = computed(() => {
     return null;
   }
 
+  if (!resolvedName.value && !resolvedEmail.value) {
+    return null;
+  }
+
   return `<p class="font-medium leading-tight">
-  ${props.user.full_name}
+  ${resolvedName.value}
 </p>
 <p class="text-slate-500 leading-tight">
-  ${props.user.email}
+  ${resolvedEmail.value}
 </p>`;
 })
 

package/src/components/BaseButton.vue

@@ -23,6 +23,7 @@
       />
 
       <slot />
+      
       <BaseIcon
         v-if="icon && iconPosition == 'end'"
         :icon="icon"

package/src/components/BaseFileUploader.vue

@@ -35,7 +35,7 @@ import { UploadedFile } from '@/types/UploadedFile';
 import { useSnackbarsStore } from '@/stores/snackbars';
 import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
 import { BaseCropperConfig } from '@/types';
-import { base64ToBlob, blobToBase64, resizeImageFromURI } from '@/utils';
+import { resizeImageForUpload } from '@/utils';
 import BaseFilePicker from './BaseFilePicker.vue';
 import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
 import { t } from '@/i18n';
@@ -220,49 +220,21 @@ async function autoResizeImage(file: File): Promise<File> {
   }
 
   try {
-    const source = await blobToBase64(file);
-    const dimensions = await getImageDimensions(source);
-
-    const resizeRatio = Math.sqrt(props.maxImageSizeBeforeResize / file.size);
-
-    let targetWidth = Math.max(1, Math.floor(dimensions.width * resizeRatio));
-    let targetHeight = Math.max(1, Math.floor(dimensions.height * resizeRatio));
-
-    let resizedBlob = await createResizedBlob(
-      source,
-      targetHeight,
-      targetWidth,
-      file.type
-    );
-
-    let attempts = 0;
-
-    while (
-      resizedBlob.size > props.maxImageSizeBeforeResize &&
-      attempts < 5 &&
-      targetWidth > 1 &&
-      targetHeight > 1
-    ) {
-      targetWidth = Math.max(1, Math.floor(targetWidth * 0.8));
-      targetHeight = Math.max(1, Math.floor(targetHeight * 0.8));
-      resizedBlob = await createResizedBlob(
-        source,
-        targetHeight,
-        targetWidth,
-        file.type
-      );
-      attempts++;
-    }
+    const resizedBlob = await resizeImageForUpload(file, {
+      maxBytes: props.maxImageSizeBeforeResize,
+    });
 
     if (resizedBlob.size >= file.size) {
       return file;
     }
 
+    const mimeType = resizedBlob.type || file.type;
+
     return new File(
       [resizedBlob],
-      getResizedFileName(file.name, resizedBlob.type),
+      getResizedFileName(file.name, mimeType),
       {
-        type: resizedBlob.type || file.type,
+        type: mimeType,
         lastModified: file.lastModified,
       }
     );
@@ -272,34 +244,6 @@ async function autoResizeImage(file: File): Promise<File> {
   }
 }
 
-async function createResizedBlob(
-  source: string,
-  height: number,
-  width: number,
-  mimeType: string
-): Promise<Blob> {
-  const resizedSource = await resizeImageFromURI(source, height, width);
-  return await base64ToBlob(resizedSource, `data:${mimeType}`);
-}
-
-async function getImageDimensions(
-  source: string
-): Promise<{ width: number; height: number }> {
-  return await new Promise((resolve, reject) => {
-    const image = new Image();
-    image.onload = () => {
-      resolve({
-        width: image.width,
-        height: image.height,
-      });
-    };
-    image.onerror = () => {
-      reject(new Error('Failed to load image dimensions'));
-    };
-    image.src = source;
-  });
-}
-
 function getResizedFileName(filename: string, mimeType: string): string {
   if (mimeType != 'image/jpeg') {
     return filename;

package/src/utils/index.ts

@@ -1,6 +1,7 @@
 import toHumanList from './toHumanList';
 import fileSizeFormat from './fileSizeFormat';
 import resizeImageFromURI from './resizeImageFromURI';
+import resizeImageForUpload from './resizeImageForUpload';
 import { disableScroll, enableScroll } from './scrollPreventer';
 import { blobToBase64, validateBase64, base64ToBlob } from './blob';
 import { getColorConfig } from './colors';
@@ -12,6 +13,7 @@ export {
   disableScroll,
   enableScroll,
   resizeImageFromURI,
+  resizeImageForUpload,
   blobToBase64,
   validateBase64,
   base64ToBlob,

package/src/utils/resizeImageForUpload.ts

@@ -0,0 +1,181 @@
+type ResizeImageForUploadOptions = {
+  maxBytes: number;
+  outputMimeType?: string;
+  quality?: number;
+};
+
+type DecodedImage = {
+  source: CanvasImageSource;
+  width: number;
+  height: number;
+  cleanup: () => void;
+};
+
+const DEFAULT_OUTPUT_QUALITY = 0.9;
+
+export default async function resizeImageForUpload(
+  file: Blob,
+  options: ResizeImageForUploadOptions
+): Promise<Blob> {
+  if (options.maxBytes <= 0 || file.size <= options.maxBytes) {
+    return file;
+  }
+
+  const decodedImage = await decodeImage(file);
+  const outputMimeType =
+    options.outputMimeType ?? getOutputMimeType((file as File).type);
+  const quality = clamp(options.quality ?? DEFAULT_OUTPUT_QUALITY, 0.1, 1);
+
+  let canvas: HTMLCanvasElement | null = null;
+
+  try {
+    const resizeRatio = Math.min(1, Math.sqrt(options.maxBytes / file.size));
+    const targetWidth = Math.max(1, Math.floor(decodedImage.width * resizeRatio));
+    const targetHeight = Math.max(
+      1,
+      Math.floor(decodedImage.height * resizeRatio)
+    );
+
+    canvas = createScaledCanvas(
+      decodedImage.source,
+      decodedImage.width,
+      decodedImage.height,
+      targetWidth,
+      targetHeight
+    );
+
+    if (!supportsQualityEncoding(outputMimeType)) {
+      return await canvasToBlob(canvas, outputMimeType);
+    }
+
+    return await canvasToBlob(canvas, outputMimeType, quality);
+  } finally {
+    decodedImage.cleanup();
+
+    if (canvas) {
+      releaseCanvas(canvas);
+    }
+  }
+}
+
+function getOutputMimeType(inputMimeType: string): string {
+  if (inputMimeType === 'image/webp') {
+    return 'image/webp';
+  }
+
+  return 'image/jpeg';
+}
+
+async function decodeImage(file: Blob): Promise<DecodedImage> {
+  if (typeof createImageBitmap === 'function') {
+    try {
+      const bitmap = await createImageBitmap(file);
+
+      return {
+        source: bitmap,
+        width: bitmap.width,
+        height: bitmap.height,
+        cleanup: () => bitmap.close(),
+      };
+    } catch {
+      // Fallback to Image decode when createImageBitmap is not supported.
+    }
+  }
+
+  const objectUrl = URL.createObjectURL(file);
+
+  try {
+    const image = await loadImage(objectUrl);
+
+    return {
+      source: image,
+      width: image.naturalWidth || image.width,
+      height: image.naturalHeight || image.height,
+      cleanup: () => URL.revokeObjectURL(objectUrl),
+    };
+  } catch (error) {
+    URL.revokeObjectURL(objectUrl);
+    throw error;
+  }
+}
+
+async function loadImage(src: string): Promise<HTMLImageElement> {
+  const image = new Image();
+  image.decoding = 'async';
+  image.src = src;
+
+  if (typeof image.decode === 'function') {
+    try {
+      await image.decode();
+      return image;
+    } catch {
+      // decode() may reject if called before enough data is available.
+    }
+  }
+
+  return await new Promise((resolve, reject) => {
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error('Failed to decode image'));
+  });
+}
+
+function createScaledCanvas(
+  source: CanvasImageSource,
+  sourceWidth: number,
+  sourceHeight: number,
+  width: number,
+  height: number
+): HTMLCanvasElement {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+
+  const context = canvas.getContext('2d', {
+    alpha: false,
+    desynchronized: true,
+  });
+
+  if (!context) {
+    throw new Error('Could not acquire context 2d');
+  }
+
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = 'high';
+  context.drawImage(source, 0, 0, sourceWidth, sourceHeight, 0, 0, width, height);
+
+  return canvas;
+}
+
+function supportsQualityEncoding(mimeType: string): boolean {
+  return mimeType === 'image/jpeg' || mimeType === 'image/webp';
+}
+
+async function canvasToBlob(
+  canvas: HTMLCanvasElement,
+  mimeType: string,
+  quality?: number
+): Promise<Blob> {
+  return await new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+          return;
+        }
+
+        reject(new Error('Could not create resized image blob'));
+      },
+      mimeType,
+      quality
+    );
+  });
+}
+
+function releaseCanvas(canvas: HTMLCanvasElement) {
+  canvas.width = 0;
+  canvas.height = 0;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}