grantthomas-nuxt 1.0.2 → 1.0.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@grantthomas/nuxt",
   "configKey": "grantThomasNuxt",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/CrudUploadField.d.vue.ts

@@ -13,6 +13,8 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
     replaceable: boolean;
     isPublic: boolean;
     additionalPostData: Record<string, any>;
+    crop: boolean;
+    aspectRatio: string;
     title?: any;
     $props: any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/CrudUploadField.vue

@@ -5,6 +5,7 @@ import { useCrudConverters } from "../composables/useCrudConverters";
 import CrudErrorDisplay from "../components/CrudErrorDisplay.vue";
 import CrudListLoader from "./CrudListLoader.vue";
 import CrudUploadFieldSelection from "./CrudUploadFieldSelection.vue";
+import CrudImageCropper from "./CrudImageCropper.vue";
 const { toBase64, getFileType } = useCrudConverters();
 const props = defineProps({
   replaceable: {
@@ -47,6 +48,14 @@ const props = defineProps({
     default: () => {
       return {};
     }
+  },
+  crop: {
+    type: Boolean,
+    default: false
+  },
+  aspectRatio: {
+    type: String,
+    default: "1:1"
   }
 });
 const model = defineModel();
@@ -55,6 +64,11 @@ const filesToUpload = ref([]);
 const fileToUpload = ref(null);
 const searchValue = ref(null);
 const tempModel = ref(null);
+const cropDialog = ref(false);
+const imageToCrop = ref(null);
+const fileForCrop = ref(null);
+const cropIndex = ref(null);
+const convertingHeic = ref(false);
 const cloneModel = () => props.multiple ? [...model.value || []] : model.value;
 const finish = () => {
   model.value = props.multiple ? [...tempModel.value] : tempModel.value;
@@ -81,10 +95,123 @@ const {
   hasFormErrors: hasUploadErrors,
   formErrors: uploadErrors
 } = useCrudApi(props.path);
+const isImageFile = (file) => {
+  if (!file) return false;
+  return file.type && file.type.startsWith("image/");
+};
+const isHeicFile = (file) => {
+  if (!file) return false;
+  return file.type === "image/heic" || file.type === "image/heic-sequence" || file.name.toLowerCase().endsWith(".heic") || file.name.toLowerCase().endsWith(".heics");
+};
+const convertHeicToJpeg = async (file) => {
+  try {
+    convertingHeic.value = true;
+    const heic2any = (await import("heic2any")).default;
+    const convertedBlob = await heic2any({
+      blob: file,
+      toType: "image/jpeg",
+      quality: 0.9
+    });
+    const blob = Array.isArray(convertedBlob) ? convertedBlob[0] : convertedBlob;
+    return new File(
+      [blob],
+      file.name.replace(/\.heic$/i, ".jpg"),
+      { type: "image/jpeg" }
+    );
+  } catch (error) {
+    console.error("HEIC conversion failed:", error);
+    if (error.code === 2 || error.message?.includes("format not supported")) {
+      throw new Error("This HEIC file format is not supported. Please use a JPEG or PNG instead.");
+    } else if (error.code === 1 || error.message?.includes("corrupt")) {
+      throw new Error("This HEIC file appears to be corrupted. Please try a different file.");
+    } else {
+      throw new Error("Failed to convert HEIC image. Please try converting to JPEG/PNG first.");
+    }
+  } finally {
+    convertingHeic.value = false;
+  }
+};
+const createImageUrl = (file) => {
+  return URL.createObjectURL(file);
+};
+const handleCropComplete = async (croppedBase64) => {
+  cropDialog.value = false;
+  if (props.multiple) {
+    const upload = {
+      base64Data: croppedBase64,
+      uploadType: "image",
+      originalFilename: fileForCrop.value.name,
+      ...props.additionalPostData
+    };
+    await createUpload(upload);
+    if (!hasUploadErrors.value && hasItem.value) {
+      onSelectImage(completedUpload.value.id);
+    }
+    const remainingFiles = filesToUpload.value.slice(cropIndex.value + 1);
+    filesToUpload.value = remainingFiles;
+  } else {
+    const upload = {
+      base64Data: croppedBase64,
+      uploadType: "image",
+      originalFilename: fileForCrop.value.name,
+      ...props.additionalPostData
+    };
+    await createUpload(upload);
+    if (!hasUploadErrors.value && hasItem.value) {
+      model.value = completedUpload.value.id;
+      dialog.value = false;
+    }
+    fileToUpload.value = null;
+  }
+  if (imageToCrop.value) {
+    URL.revokeObjectURL(imageToCrop.value);
+  }
+  imageToCrop.value = null;
+  fileForCrop.value = null;
+  cropIndex.value = null;
+  uploadsLoading.value = false;
+};
+const handleCropCancel = () => {
+  cropDialog.value = false;
+  if (imageToCrop.value) {
+    URL.revokeObjectURL(imageToCrop.value);
+  }
+  imageToCrop.value = null;
+  fileForCrop.value = null;
+  cropIndex.value = null;
+  if (props.multiple) {
+    filesToUpload.value = [];
+  } else {
+    fileToUpload.value = null;
+  }
+  uploadsLoading.value = false;
+};
 const processUploads = async () => {
   uploadsLoading.value = true;
+  uploadErrors.value = {};
   if (props.multiple) {
-    for (let file of filesToUpload.value) {
+    for (let i = 0; i < filesToUpload.value.length; i++) {
+      let file = filesToUpload.value[i];
+      if (isHeicFile(file)) {
+        try {
+          file = await convertHeicToJpeg(file);
+        } catch (error) {
+          console.error("Error converting HEIC:", error);
+          uploadErrors.value = {
+            conversion: [error.message]
+          };
+          uploadsLoading.value = false;
+          filesToUpload.value = [];
+          return;
+        }
+      }
+      if (props.crop && isImageFile(file)) {
+        cropIndex.value = i;
+        fileForCrop.value = file;
+        imageToCrop.value = createImageUrl(file);
+        cropDialog.value = true;
+        return;
+      }
       let upload = {
         base64Data: await toBase64(file),
         uploadType: getFileType(file),
@@ -96,7 +223,27 @@ const processUploads = async () => {
         onSelectImage(completedUpload.value.id);
       }
     }
+    filesToUpload.value = [];
   } else {
+    if (isHeicFile(fileToUpload.value)) {
+      try {
+        fileToUpload.value = await convertHeicToJpeg(fileToUpload.value);
+      } catch (error) {
+        console.error("Error converting HEIC:", error);
+        uploadErrors.value = {
+          conversion: [error.message]
+        };
+        uploadsLoading.value = false;
+        fileToUpload.value = null;
+        return;
+      }
+    }
+    if (props.crop && isImageFile(fileToUpload.value)) {
+      fileForCrop.value = fileToUpload.value;
+      imageToCrop.value = createImageUrl(fileToUpload.value);
+      cropDialog.value = true;
+      return;
+    }
     let upload = {
       base64Data: await toBase64(fileToUpload.value),
       uploadType: getFileType(fileToUpload.value),
@@ -108,13 +255,9 @@ const processUploads = async () => {
       model.value = completedUpload.value.id;
       dialog.value = false;
     }
-  }
-  uploadsLoading.value = false;
-  if (props.multiple) {
-    filesToUpload.value = [];
-  } else {
     fileToUpload.value = null;
   }
+  uploadsLoading.value = false;
 };
 const selectionFilters = computed(() => {
   let filters = {};
@@ -135,12 +278,18 @@ watch(() => dialog.value, (val) => {
     tempModel.value = cloneModel();
   }
 });
-watch(() => filesToUpload.value, () => {
+watch(() => filesToUpload.value, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    uploadErrors.value = {};
+  }
   if (filesToUpload.value.length > 0) {
     processUploads();
   }
 });
-watch(() => fileToUpload.value, () => {
+watch(() => fileToUpload.value, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    uploadErrors.value = {};
+  }
   if (fileToUpload.value) {
     processUploads();
   }
@@ -190,6 +339,21 @@ watch(() => fileToUpload.value, () => {
           <div class="flex-wrap">
             <div class="border pa-3 rounded mb-3">
               <h4 class="mb-4">Upload new media</h4>
+
+              <!-- HEIC Conversion Indicator -->
+              <v-alert v-if="convertingHeic" type="info" class="mb-3" density="compact">
+                <div class="d-flex align-center">
+                  <v-progress-circular
+                    indeterminate
+                    color="primary"
+                    size="20"
+                    width="2"
+                    class="mr-2"
+                  />
+                  <span>Converting HEIC image to JPEG...</span>
+                </div>
+              </v-alert>
+
               <div class="d-flex">
                 <div class="flex-fill">
                   <v-file-input
@@ -307,5 +471,14 @@ watch(() => fileToUpload.value, () => {
         </div>
       </v-card>
     </v-dialog>
+
+    <!-- Crop Dialog -->
+    <crud-image-cropper
+      v-if="cropDialog && imageToCrop"
+      :image-url="imageToCrop"
+      :aspect-ratio="aspectRatio"
+      @crop="handleCropComplete"
+      @cancel="handleCropCancel"
+    />
   </div>
 </template>

package/dist/runtime/components/CrudUploadField.vue.d.ts

@@ -13,6 +13,8 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
     replaceable: boolean;
     isPublic: boolean;
     additionalPostData: Record<string, any>;
+    crop: boolean;
+    aspectRatio: string;
     title?: any;
     $props: any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/composables/useCrudConverters.js

@@ -38,6 +38,8 @@ export function useCrudConverters() {
       case "image/jpg":
       case "image/jpeg":
       case "image/png":
+      case "image/heic":
+      case "image/heic-sequence":
         return "mdi-file-image";
       case "application/pdf":
         return "mdi-file-pdf";
@@ -157,6 +159,8 @@ export function useCrudConverters() {
       case "image/jpg":
       case "image/jpeg":
       case "image/png":
+      case "image/heic":
+      case "image/heic-sequence":
         return 1;
       case "application/pdf":
         return 2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grantthomas-nuxt",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Crud module for Nuxt 3 interacting with sibling .net project",
   "repository": "Tap-Leagues/GrantThomas.Nuxt",
   "license": "MIT",
@@ -32,10 +32,12 @@
     "@nuxt/scripts": "^0.11.8",
     "@vueuse/core": "^13.3.0",
     "@vueuse/nuxt": "^13.3.0",
+    "heic2any": "^0.0.4",
     "luxon": "^3.6.1",
     "query-string": "^9.2.1",
     "ts-luxon": "^6.1.0",
     "uuid": "^11.0.2",
+    "vue-advanced-cropper": "^2.8.9",
     "vuetify-nuxt-module": "^0.18.7"
   },
   "devDependencies": {
@@ -52,7 +54,7 @@
     "eslint-config-prettier": "^8.8.0",
     "sass": "^1.89.2",
     "typescript": "^5.8.3",
-    "vue-tsc": "^2.2.10",
-    "vitest": "^3.2.3"
+    "vitest": "^3.2.3",
+    "vue-tsc": "^2.2.10"
   }
 }