@falcondev-oss/nuxt-layers-base 0.23.2 → 0.25.0

package/app/components/u/UField.vue

@@ -84,7 +84,7 @@ const inputProps = computed(() => {
         <UPopover
           v-if="!!field.errors"
           mode="hover"
-          :delay-duration="0"
+          :open-delay="0"
           :ui="{
             content: 'bg-error-50 ring-error-200! rounded py-1 px-2',
           }"

package/app/components/u/UInputFile.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts" generic="Multiple extends boolean = false">
+import type { FileUploadEmits, FileUploadProps } from '@nuxt/ui'
+import { useForwardPropsEmits } from 'reka-ui'
+import { omit } from 'remeda'
+
+const props = defineProps<
+  FileUploadProps<Multiple> & {
+    /**
+     * Set to `false` to disable compression
+     */
+    compression?:
+      | boolean
+      | {
+          /**
+           * @default 1920
+           */
+          maxDimension?: number
+          /**
+           * @default 0.85
+           */
+          quality?: number
+          /**
+           * @default 'image/webp'
+           */
+          outputType?: string
+        }
+  }
+>()
+const emit = defineEmits<
+  FileUploadEmits & {
+    compressed: [
+      event: {
+        original: File
+        compressed: File
+        savedBytes: number
+        savedPercentage: number
+      },
+    ]
+  }
+>()
+const forwarded = useForwardPropsEmits(props, emit)
+
+type Files = Multiple extends true ? File[] : File
+const model = defineModel<Files | null>()
+
+const compressedFiles = new WeakMap<File, File>()
+async function forwardFiles(files: File | File[] | null | undefined) {
+  if (!files) {
+    model.value = files
+    return
+  }
+
+  const filesArray = Array.isArray(files) ? files : [files]
+  const compressed = await Promise.all(
+    filesArray.map(async (file) => {
+      if (!file.type.startsWith('image/')) return file
+      return await compressImage(file)
+    }),
+  )
+
+  model.value = (forwarded.value.multiple ? compressed : compressed[0]!) as Files
+}
+
+async function compressImage(file: File) {
+  if (forwarded.value.compression === false) return file
+  if (compressedFiles.has(file)) return compressedFiles.get(file)!
+
+  const maxDimension =
+    typeof forwarded.value.compression === 'object'
+      ? (forwarded.value.compression?.maxDimension ?? 1920)
+      : 1920
+  const quality =
+    typeof forwarded.value.compression === 'object'
+      ? (forwarded.value.compression?.quality ?? 0.85)
+      : 0.85
+  const outputType =
+    typeof forwarded.value.compression === 'object'
+      ? (forwarded.value.compression?.outputType ?? 'image/webp')
+      : 'image/webp'
+
+  const img = new Image()
+  await new Promise((resolve, reject) => {
+    img.addEventListener('load', resolve)
+    img.addEventListener('error', reject)
+    img.src = URL.createObjectURL(file)
+  })
+
+  const scale = Math.min(1, maxDimension / Math.max(img.width, img.height))
+  const canvas = document.createElement('canvas')
+  canvas.width = img.width * scale
+  canvas.height = img.height * scale
+  const ctx = canvas.getContext('2d')!
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+  URL.revokeObjectURL(img.src)
+
+  return new Promise<File>((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) return reject(new Error('Canvas is empty'))
+
+        const name = file.name.replace(/\.\w+$/, `.${outputType.split('/')[1]}`)
+        const compressedFile = new File([blob], name, { type: outputType })
+
+        compressedFiles.set(file, compressedFile)
+        compressedFiles.set(compressedFile, compressedFile) // required since we set model value to the compressed file
+        resolve(compressedFile)
+
+        emit('compressed', {
+          original: file,
+          compressed: compressedFile,
+          savedBytes: file.size - compressedFile.size,
+          savedPercentage: ((file.size - compressedFile.size) / file.size) * 100,
+        })
+      },
+      outputType,
+      quality,
+    )
+    canvas.remove()
+  })
+}
+</script>
+
+<template>
+  <UFileUpload
+    v-bind="omit(forwarded, ['compression'])"
+    @update:model-value="(files) => forwardFiles(files)"
+  />
+</template>

package/nuxt.config.ts

@@ -11,6 +11,12 @@ export default defineNuxtConfig({
   typescript: {
     strict: true,
     tsConfig: {
+      vueCompilerOptions: {
+        strictTemplates: true,
+        strictVModel: false,
+        htmlAttributes: ['aria-*'],
+        dataAttributes: ['data-*'],
+      },
       compilerOptions: {
         allowArbitraryExtensions: true,
       },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.23.2",
+  "version": "0.25.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": "github:falcondev-oss/nuxt-layers",
@@ -13,15 +13,18 @@
     "node": "24",
     "pnpm": "10"
   },
+  "peerDependencies": {
+    "@nuxt/ui": "~4.5.0"
+  },
   "dependencies": {
-    "@falcondev-oss/form-core": "^0.21.1",
-    "@falcondev-oss/form-vue": "^0.21.1",
+    "@falcondev-oss/form-core": "^0.21.2",
+    "@falcondev-oss/form-vue": "^0.21.2",
     "@falcondev-oss/trpc-typed-form-data": "^0.4.1",
     "@falcondev-oss/trpc-vue-query": "^0.5.2",
     "@iconify-json/lucide": "^1.2.94",
     "@internationalized/date": "^3.11.0",
     "@nuxt/icon": "^2.2.1",
-    "@nuxt/ui": "4.4.0",
+    "@nuxt/ui": "~4.5.0",
     "@nuxtjs/color-mode": "^4.0.0",
     "@tanstack/vue-query": "^5.92.9",
     "@trpc/client": "^11.10.0",
@@ -52,7 +55,7 @@
   "scripts": {
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
-    "type-check": "vue-tsc --noEmit",
+    "type-check": "vue-tsc --build",
     "lint": "pnpm -w eslint:cmd \"$PWD\" && pnpm -w prettier:cmd \"$PWD\" --check",
     "lint:fix": "pnpm -w eslint:cmd \"$PWD\" --fix && pnpm -w prettier:cmd \"$PWD\" --write"
   }