@falcondev-oss/nuxt-layers-base 0.24.0 → 0.26.0

package/.playground/app/pages/index.vue

@@ -244,21 +244,21 @@ const columns = useTableColumns<typeof data>(
           class="flex flex-col gap-4"
         >
           {{ form.data }}
-          <UField v-slot="{ props }" :field="form.fields.text.$use()">
-            <UInput class="w-full" v-bind="props" />
+          <UField v-slot="{ bind }" :field="form.fields.text.$use()">
+            <UInput class="w-full" v-bind="bind" />
           </UField>
           <UField
-            v-slot="{ props }"
+            v-slot="{ bind }"
             :field="
               form.fields.dateIso.$use({
                 translate: dateValueIsoTranslator(),
               })
             "
           >
-            <UInputDatePicker class="w-full" v-bind="props" />
+            <UInputDatePicker class="w-full" v-bind="bind" />
           </UField>
-          <UField v-slot="{ props }" :field="form.fields.duration.$use()">
-            <UInputDurationMinutes class="w-full" v-bind="props" />
+          <UField v-slot="{ bind }" :field="form.fields.duration.$use()">
+            <UInputDurationMinutes class="w-full" v-bind="bind" />
           </UField>
         </UForm>
       </UCard>

package/.playground/nuxt.config.ts

@@ -6,15 +6,5 @@ export default defineNuxtConfig({
       projectId: 'my-project',
     },
   },
-  typescript: {
-    tsConfig: {
-      vueCompilerOptions: {
-        strictTemplates: true,
-        strictVModel: false,
-        htmlAttributes: ['aria-*'],
-        dataAttributes: ['data-*'],
-      },
-    },
-  },
   css: ['~/assets/test.css'],
 })

package/app/components/u/UField.vue

@@ -1,27 +1,32 @@
-<script setup lang="ts" generic="T, const Nullable extends boolean = false">
+<script setup lang="ts" generic="T">
 import type { FormField } from '@falcondev-oss/form-core'
 import type { FormFieldProps, FormFieldSlots } from '@nuxt/ui'
 import { useForwardProps } from 'reka-ui'
 import * as R from 'remeda'
 
-type InputSlotProps<T, Nullable extends boolean> = {
+type InputProps<T> = {
   'modelValue': T
   'onUpdate:modelValue': (value: T) => void
   'onBlur': () => void
   'disabled': boolean
   'loading': boolean
-  'modelModifiers': true extends Nullable ? { nullable: true } : undefined
+  'modelModifiers': { nullable: true }
   'placeholder'?: string
 }
 
 const props = defineProps<
   FormFieldProps & {
     field: FormField<T>
-  } & { nullable?: Nullable }
+  }
 >()
+
 const slots = defineSlots<
   {
-    default: (slot: { props: InputSlotProps<T, Nullable>; field: FormField<T> }) => any
+    default: (slot: {
+      bind: InputProps<T>
+      model: WritableComputedRef<T>
+      field: FormField<T>
+    }) => any
   } & Omit<FormFieldSlots, 'default'>
 >()
 
@@ -52,7 +57,7 @@ const formFieldProps = computed<FormFieldProps>(() => {
   }
 })
 
-const inputProps = computed(() => {
+const bind = computed(() => {
   const field = forwardedProps.value.field
 
   const placeholder = field.errors && field.errors.join('\n')
@@ -63,12 +68,21 @@ const inputProps = computed(() => {
     'onBlur': () => field.handleBlur(),
     'disabled': field.disabled,
     'loading': field.isPending,
-    'modelModifiers': (props.nullable === true
-      ? { nullable: true }
-      : undefined) as true extends Nullable ? { nullable: true } : undefined,
     placeholder,
-  } satisfies InputSlotProps<T, Nullable>
+    'modelModifiers': { nullable: true },
+  } satisfies InputProps<T>
 })
+
+const model = computed({
+  get() {
+    return forwardedProps.value.field.value
+  },
+  set(value: T) {
+    forwardedProps.value.field.handleChange(value)
+  },
+})
+
+const model_ = { model }
 </script>
 
 <template>
@@ -101,7 +115,7 @@ const inputProps = computed(() => {
       </span>
     </template>
 
-    <slot v-bind="{ props: inputProps, field: forwardedProps.field }">
+    <slot v-bind="{ bind, model: model_.model, field: forwardedProps.field }">
       <DevOnly>
         <p class="font-black text-red-500">UField missing slot</p>
       </DevOnly>

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": "github:falcondev-oss/nuxt-layers",
@@ -24,7 +24,6 @@
     "@iconify-json/lucide": "^1.2.94",
     "@internationalized/date": "^3.11.0",
     "@nuxt/icon": "^2.2.1",
-    "@nuxt/ui": "~4.5.0",
     "@nuxtjs/color-mode": "^4.0.0",
     "@tanstack/vue-query": "^5.92.9",
     "@trpc/client": "^11.10.0",