sprintify-ui 0.0.183 → 0.0.184

package/src/components/BaseFileUploader.vue

@@ -1,86 +1,75 @@
 <template>
   <div class="relative">
-    <BaseFilePicker
-      :button-class="buttonClass"
-      :disabled="uploading || disabled"
-      :accept="accept"
+    <component
+      :is="componentInternal"
+      v-bind="pickerProps"
       @select="onFileSelect"
     >
       <template #default="slotProps">
         <slot
           name="default"
           :uploading="uploading"
-          :selecting="slotProps.selecting"
-          :dragging="slotProps.dragging"
-          :disabled="slotProps.disabled"
+          :loading="loading"
+          v-bind="slotProps"
         />
         <slot
           name="loading"
           :uploading="uploading"
-          :selecting="slotProps.selecting"
-          :dragging="slotProps.dragging"
-          :disabled="slotProps.disabled"
+          :loading="loading"
+          v-bind="slotProps"
         >
           <BaseLoadingCover
             :delay="0"
-            icon-class="text-primary-600 w-6 h-6"
+            icon-class="w-6 h-6 text-primary-600"
             :model-value="loading || uploading || slotProps.selecting"
           />
         </slot>
       </template>
-    </BaseFilePicker>
+    </component>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { config } from '@/index';
-import { PropType } from 'vue';
 import { UploadedFile } from '@/types/UploadedFile';
-import { toHumanList, fileSizeFormat } from '@/utils';
 import { useNotificationsStore } from '@/stores/notifications';
 import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
+import { BaseCropperConfig } from '@/types';
 import BaseFilePicker from './BaseFilePicker.vue';
+import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
 
 const http = config.http;
 const i18n = useI18n();
 const notifications = useNotificationsStore();
 
-const props = defineProps({
-  url: {
-    default: undefined,
-    type: String,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  loading: {
-    default: false,
-    type: Boolean,
-  },
-  beforeUpload: {
-    default: (): boolean => {
+const props = withDefaults(
+  defineProps<{
+    component?: 'BaseFilePicker' | 'BaseFilePickerCrop';
+    url?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    beforeUpload?: () => boolean;
+    buttonClass?: string;
+    maxSize?: number;
+    accept?: string;
+    acceptedExtensions?: string[];
+    cropper?: BaseCropperConfig | boolean | null;
+  }>(),
+  {
+    component: 'BaseFilePicker',
+    url: undefined,
+    disabled: false,
+    loading: false,
+    beforeUpload: (): boolean => {
       return true;
     },
-    type: Function as PropType<() => boolean>,
-  },
-  buttonClass: {
-    default: '',
-    type: String,
-  },
-  maxSize: {
-    default: 1024 * 1024 * 20, // 20 MB,
-    type: Number,
-  },
-  accept: {
-    default: undefined,
-    type: String,
-  },
-  acceptedExtensions: {
-    default: undefined,
-    type: Array as PropType<string[]>,
-  },
-});
+    buttonClass: '',
+    maxSize: undefined,
+    accept: undefined,
+    acceptedExtensions: undefined,
+    cropper: true,
+  }
+);
 
 const emit = defineEmits([
   'upload:start',
@@ -89,6 +78,25 @@ const emit = defineEmits([
   'upload:end',
 ]);
 
+const componentInternal = computed(() => {
+  if (props.component == 'BaseFilePickerCrop') {
+    return BaseFilePickerCrop;
+  }
+  return BaseFilePicker;
+});
+
+const pickerProps = computed(() => {
+  return {
+    disabled: props.disabled || props.loading || uploading.value,
+    buttonClass: props.buttonClass,
+    maxSize: props.maxSize,
+    accept: props.component == 'BaseFilePickerCrop' ? undefined : props.accept,
+    acceptedExtensions: props.acceptedExtensions,
+    cropper:
+      props.component == 'BaseFilePickerCrop' ? props.cropper : undefined,
+  };
+});
+
 const uploading = ref(false);
 
 async function onFileSelect(file: File) {
@@ -104,44 +112,6 @@ async function onFileSelect(file: File) {
   }
 
   try {
-    if (file.size > props.maxSize) {
-      notifications.push({
-        color: 'danger',
-        title: i18n.t('sui.error'),
-        text: i18n.t('sui.the_file_size_must_not_exceed_x', {
-          x: fileSizeFormat(props.maxSize),
-        }),
-      });
-
-      uploading.value = false;
-      return;
-    }
-
-    const extension = file.name.split('.').pop();
-
-    if (
-      extension &&
-      props.acceptedExtensions &&
-      props.acceptedExtensions.length
-    ) {
-      if (!props.acceptedExtensions.includes(extension)) {
-        notifications.push({
-          color: 'danger',
-          title: i18n.t('sui.error'),
-          text:
-            i18n.t('sui.the_file_type_is_invalid') +
-            ' ' +
-            i18n.t('sui.file_must_be_of_type') +
-            ' ' +
-            toHumanList(props.acceptedExtensions, i18n.t('sui.or')) +
-            '.',
-        });
-
-        uploading.value = false;
-        return;
-      }
-    }
-
     const formData = new FormData();
 
     formData.append('file', file);
@@ -170,6 +140,7 @@ async function onFileSelect(file: File) {
       onSuccess(payload);
     }
   } catch (e: unknown) {
+    console.error(e);
     emit('upload:fail');
     notifications.push({
       color: 'danger',

package/src/components/BaseMediaLibrary.stories.js

@@ -16,9 +16,8 @@ export default {
   args: {
     max: null,
     min: 2,
-    acceptedExtensions: ['jpg', 'png'],
-    uploadUrl: 'https://faker.witify.io/upload',
-    maxSize: 500 * 1024,
+    acceptedExtensions: ['jpg', 'jpeg', 'png', 'webp'],
+    uploadUrl: 'https://faker.witify.io/api/todos/upload',
     currentMedia: [
       mediaModel,
       {
@@ -59,10 +58,11 @@ const Template = (args) => ({
     BaseMediaLibrary,
   },
   setup() {
-    return { args };
+    const value = ref(null);
+    return { args, value };
   },
   template: `
-    <BaseMediaLibrary v-bind="args" />
+    <BaseMediaLibrary v-model="value" v-bind="args" />
     <BaseApp></BaseApp>
   `,
 });
@@ -70,6 +70,25 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const Crop = Template.bind({});
+Crop.args = {
+  pickerComponent: 'BaseFilePickerCrop',
+  cropper: {
+    config: {
+      maxWidth: 300,
+    },
+    preset: 'avatar',
+    presetOptions: {
+      size: 300,
+    },
+  },
+};
+
+export const MaxSize = Template.bind({});
+MaxSize.args = {
+  maxSize: 10 * 1024,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,

package/src/components/BaseMediaLibrary.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <BaseFileUploader
+      :component="pickerComponent"
       :max-size="maxSize"
       :disabled="disabled"
       class="w-full"
@@ -8,6 +9,7 @@
       :accept="accept"
       :accepted-extensions="acceptedExtensions"
       :url="uploadUrl"
+      :cropper="pickerComponent == 'BaseFilePickerCrop' ? cropper : undefined"
       @upload:start="onUploadStart"
       @upload:end="onUploadEnd"
       @upload:fail="$emit('upload:fail', $event)"
@@ -92,13 +94,14 @@ import { PropType } from 'vue';
 import { cloneDeep, isArray, isObject, capitalize } from 'lodash';
 import { UploadedFile } from '@/types/UploadedFile';
 import { Media } from '@/types/Media';
-import { MediaLibraryPayload } from '@/types';
+import { BaseCropperConfig, MediaLibraryPayload } from '@/types';
 import { fileSizeFormat } from '@/utils';
 import { useDialogsStore } from '@/stores/dialogs';
 import { useNotificationsStore } from '@/stores/notifications';
 import BaseMediaItem from '@/components/BaseMediaItem.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
 import { useField } from '@/composables/field';
+import { BaseIcon } from '.';
 
 const i18n = useI18n();
 
@@ -152,6 +155,14 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  pickerComponent: {
+    default: 'BaseFilePicker',
+    type: String as PropType<'BaseFilePicker' | 'BaseFilePickerCrop'>,
+  },
+  cropper: {
+    default: undefined,
+    type: Object as PropType<BaseCropperConfig | boolean | null>,
+  },
 });
 
 const emit = defineEmits([
@@ -211,7 +222,11 @@ function onUploadSuccess(file: UploadedFile) {
     return;
   }
 
-  if (numberOfFiles.value >= normalizedMax.value && normalizedMax.value > 1) {
+  if (
+    normalizedMax.value &&
+    numberOfFiles.value >= normalizedMax.value &&
+    normalizedMax.value > 1
+  ) {
     notifications.push({
       title: i18n.t('sui.whoops'),
       text: i18n.t('sui.you_can_upload_up_to_n_files', {

package/src/components/index.ts

@@ -22,6 +22,8 @@ import BaseClipboard from './BaseClipboard.vue';
 import BaseColor from './BaseColor.vue';
 import BaseContainer from './BaseContainer.vue';
 import BaseCounter from './BaseCounter.vue';
+import BaseCropper from './BaseCropper.vue';
+import BaseCropperModal from './BaseCropperModal.vue';
 import BaseDataIterator from './BaseDataIterator.vue';
 import BaseDataTable from './BaseDataTable.vue';
 import BaseDatePicker from './BaseDatePicker.vue';
@@ -36,6 +38,7 @@ import BaseEmptyState from '@/svg/BaseEmptyState.vue';
 import BaseField from './BaseField.vue';
 import BaseFieldI18n from './BaseFieldI18n.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
+import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
 import BaseForm from './BaseForm.vue';
 import BaseHasMany from './BaseHasMany.vue';
@@ -112,6 +115,8 @@ export {
   BaseColor,
   BaseContainer,
   BaseCounter,
+  BaseCropper,
+  BaseCropperModal,
   BaseDataIterator,
   BaseDataTable,
   BaseDatePicker,
@@ -126,6 +131,7 @@ export {
   BaseField,
   BaseFieldI18n,
   BaseFilePicker,
+  BaseFilePickerCrop,
   BaseFileUploader,
   BaseForm,
   BaseHasMany,

package/src/lang/en.json

@@ -1,4 +1,8 @@
 {
+  "cancel": "Cancel",
+  "cropper": "Crop",
+  "drag_to_reposition": "Drag to reposition",
+  "save": "Save",
   "sui": {
     "address": "Address",
     "address_1_placeholder": "Postal address",
@@ -22,14 +26,15 @@
     "delete_record": "Delete the record",
     "delete_record_description": "Are you sure to delete this record? This action is irreversible.",
     "deselect_all": "Deselect all",
+    "drag_to_reposition": "Drag to reposition",
     "drop_or_click_to_upload": "Drop or click to upload",
     "edit": "Edit",
     "error": "Error",
     "file_must_be_of_type": "The file must be of type",
     "filters": "Filters",
     "go_to_page": "Go to ",
-    "invalid_value": "Invalid value",
     "just_now": "Just now",
+    "invalid_value": "Invalid value",
     "maximum_x_decimal_places": "Maximum 1 decimal place|Maximum {count} decimal places",
     "min_x_characters": "{x} characters minimum",
     "month": "Month",

package/src/lang/fr.json

@@ -1,4 +1,8 @@
 {
+  "cancel": "Fermer",
+  "cropper": "Recadrer",
+  "drag_to_reposition": "Faites glisser pour repositionner",
+  "save": "Sauvegarder",
   "sui": {
     "address": "Adresse",
     "address_1_placeholder": "Adresse postale",
@@ -22,14 +26,15 @@
     "delete_record": "Supprimer l'item",
     "delete_record_description": "Voulez-vous vraiment supprimer cet item ? \nCette action est irréversible.",
     "deselect_all": "Tout déselectionner",
+    "drag_to_reposition": "Faites glisser pour repositionner",
     "drop_or_click_to_upload": "Déposez ou cliquez pour télécharger",
     "edit": "Modifier",
     "error": "Erreur",
     "file_must_be_of_type": "Le fichier doit être de type",
     "filters": "Filtres",
     "go_to_page": "Page",
-    "invalid_value": "Valeur invalide",
     "just_now": "à l’instant",
+    "invalid_value": "Valeur invalide",
     "maximum_x_decimal_places": "Maximum 1 décimale|Maximum {count} décimales",
     "min_x_characters": "{x} caractères minimum",
     "month": "Mois",

package/src/types/ImagePickerResult.ts

@@ -0,0 +1,5 @@
+export interface ImagePickerResult {
+  mime: string;
+  data: string;
+  file: File;
+}

package/src/types/index.ts

@@ -3,6 +3,7 @@
 import { RouteLocationRaw } from 'vue-router';
 import { UploadedFile } from './UploadedFile';
 import { Notification as AppNotification } from './Notification';
+import { CropType, ResultOptions } from 'croppie';
 
 export type Locales = { [locale: string]: string };
 
@@ -226,3 +227,33 @@ export interface RowAction {
   to?: (row: CollectionItem) => RouteLocationRaw;
   disabled?: (row: CollectionItem) => boolean;
 }
+
+export interface CropperConfig {
+  height?: number;
+  width?: number;
+  viewport?: {
+    type?: CropType;
+    width: number;
+    height: number;
+  };
+  boundary?: {
+    width: number;
+    height: number;
+  };
+  enableResize?: boolean;
+  enableZoom?: boolean;
+  enableOrientation?: boolean;
+  showZoomer?: boolean;
+  initialResize?: number;
+  maxWidth?: number;
+}
+
+export type CropperPreset = 'avatar' | 'cover';
+
+export interface BaseCropperConfig {
+  source: string;
+  config?: CropperConfig;
+  preset?: CropperPreset;
+  presetOptions?: Record<string, any>;
+  saveOptions?: ResultOptions;
+}

package/src/utils/blob.ts

@@ -0,0 +1,30 @@
+export function blobToBase64(file: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+  });
+}
+
+export function validateBase64(
+  base64: string,
+  prefix = 'data:application/octet-stream'
+): string {
+  if (!base64.match(/^data:.*\/.*;base64,/)) {
+    base64 = `${prefix};base64,${base64}`;
+  }
+
+  return base64;
+}
+
+export async function base64ToBlob(
+  base64: string,
+  prefix = 'data:application/octet-stream'
+): Promise<Blob> {
+  base64 = validateBase64(base64, prefix);
+
+  const response = await fetch(base64);
+
+  return response.blob();
+}

package/src/utils/cropper/avatar.ts

@@ -0,0 +1,33 @@
+import { CropperConfig } from '@/types';
+import { isNumber, merge } from 'lodash';
+import { PresetInterface } from './presetInterface';
+
+export class AvatarPreset extends PresetInterface {
+  public handle(): CropperConfig {
+    const size = this.presetOptions?.size;
+
+    let defaultSize = isNumber(size) ? size : 200;
+
+    if (this.config?.maxWidth) {
+      defaultSize = Math.min(this.config.maxWidth, defaultSize);
+    }
+
+    return merge(this.config, {
+      width: defaultSize,
+      height: defaultSize,
+      enableOrientation: true,
+      enableResize: false,
+      enableZoom: true,
+      showZoomer: true,
+      viewport: {
+        width: defaultSize,
+        height: defaultSize,
+        type: 'circle',
+      },
+      boundary: {
+        width: defaultSize,
+        height: defaultSize,
+      },
+    });
+  }
+}

package/src/utils/cropper/cover.ts

@@ -0,0 +1,41 @@
+import { CropperConfig } from '@/types';
+import { isNumber, merge } from 'lodash';
+import { PresetInterface } from './presetInterface';
+
+export class CoverPreset extends PresetInterface {
+  public handle(): CropperConfig {
+    const size = this.presetOptions?.size;
+    const ratio = this.presetOptions?.ratio;
+
+    const defaultRatio = isNumber(ratio) ? ratio : 16 / 9;
+    let width = isNumber(size) ? size : 300;
+    let height = width / defaultRatio;
+    const padding = height * 0.05;
+
+    if (this.config?.maxWidth) {
+      const safeWidth = Math.min(this.config.maxWidth, width);
+      if (safeWidth !== width) {
+        height = safeWidth / defaultRatio;
+        width = safeWidth;
+      }
+    }
+
+    return merge(this.config, {
+      width: width,
+      height: height,
+      enableOrientation: true,
+      enableResize: false,
+      enableZoom: true,
+      showZoomer: true,
+      viewport: {
+        width: width - padding,
+        height: height - padding,
+        type: 'square',
+      },
+      boundary: {
+        width: width,
+        height: height,
+      },
+    });
+  }
+}

package/src/utils/cropper/presetInterface.ts

@@ -0,0 +1,16 @@
+import { CropperConfig } from '@/types';
+
+export abstract class PresetInterface {
+  protected config: CropperConfig | null = null;
+  protected presetOptions: Record<string, any> | null = null;
+
+  constructor(
+    config: CropperConfig | null = null,
+    presetOptions: Record<string, any> | null = null
+  ) {
+    this.config = config;
+    this.presetOptions = presetOptions;
+  }
+
+  public abstract handle(): CropperConfig;
+}

package/src/utils/cropper/presets.ts

@@ -0,0 +1,7 @@
+import { AvatarPreset } from './avatar';
+import { CoverPreset } from './cover';
+
+export const presets = {
+  avatar: AvatarPreset,
+  cover: CoverPreset,
+};

package/src/utils/fileValidations.ts

@@ -0,0 +1,26 @@
+export function maxSize(blob: Blob, maxSize: number): boolean {
+  if (blob.size > maxSize) {
+    return false;
+  }
+
+  return true;
+}
+
+export function validExtension(
+  blob: Blob | File,
+  extensions?: string[] | undefined
+): boolean {
+  let extension = blob.type.split('/').pop();
+
+  if (blob instanceof File) {
+    extension = blob.name.split('.').pop();
+  }
+
+  if (extension && extensions && extensions.length) {
+    if (!extensions.includes(extension)) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/utils/index.ts

@@ -1,5 +1,16 @@
 import toHumanList from './toHumanList';
 import fileSizeFormat from './fileSizeFormat';
+import resizeImageFromURI from './resizeImageFromURI';
 import { disableScroll, enableScroll } from './scrollPreventer';
+import { blobToBase64, validateBase64, base64ToBlob } from './blob';
 
-export { toHumanList, fileSizeFormat, disableScroll, enableScroll };
+export {
+  toHumanList,
+  fileSizeFormat,
+  disableScroll,
+  enableScroll,
+  resizeImageFromURI,
+  blobToBase64,
+  validateBase64,
+  base64ToBlob,
+};