@falcondev-oss/nuxt-layers-base 0.40.3 → 0.41.0

package/app/components/u/UForm.tsx

@@ -0,0 +1,133 @@
+import type { FormHandle } from '@falcondev-oss/form-core'
+import type { ButtonProps } from '@nuxt/ui'
+import type { VNode } from 'vue'
+import type { Toast } from '#ui/composables'
+import { Teleport } from 'vue'
+import { UActions } from '#components'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      form: FormHandle
+      submitLabel?: string
+      submitButtonProps?: ButtonProps
+      actions?: ButtonProps[]
+      actionsTeleportTo?: string
+      disableSubmitIfUnchanged?: boolean
+      successToast?: Partial<Toast>
+      preventPageLeave?: boolean
+    }
+    slots: {
+      default: () => VNode[]
+    }
+  }) =>
+    options(_, {
+      name: 'UForm',
+      props: [
+        'form',
+        'submitLabel',
+        'submitButtonProps',
+        'actions',
+        'actionsTeleportTo',
+        'disableSubmitIfUnchanged',
+        'successToast',
+        'preventPageLeave',
+      ],
+      emits: [],
+      setup: (props, { slots }) => {
+        const preventPageLeave = () => props.preventPageLeave ?? true
+        const disableSubmitIfUnchanged = () => props.disableSubmitIfUnchanged ?? true
+
+        usePreventPageLeave(
+          () => preventPageLeave() && props.form.isChanged && !props.form.isLoading,
+        )
+
+        const toast = useToast()
+        let unhook: (() => void) | null = null
+        watch(
+          () => props.form,
+          (form) => {
+            unhook?.()
+            unhook = form.hooks.addHooks({
+              afterSubmit(result) {
+                if (!result.success || !props.successToast) return
+
+                toast.add({
+                  preset: 'success',
+                  ...props.successToast,
+                })
+              },
+            })
+          },
+          { immediate: true },
+        )
+
+        const actionsWithSubmit = computed(() => {
+          const submit = {
+            ...props.submitButtonProps,
+            variant: 'solid',
+            label: props.submitButtonProps?.label ?? props.submitLabel ?? 'Submit',
+            disabled: disableSubmitIfUnchanged()
+              ? !props.form.isChanged || props.form.isLoading
+              : props.form.isLoading,
+            loading: props.form.isLoading,
+            // `loadingAuto` awaits the handler, which `ButtonProps` still types as `void`
+            // eslint-disable-next-line ts/no-misused-promises
+            onClick: async () => {
+              await props.form.submit()
+            },
+          } satisfies ButtonProps
+          if (!props.actions) return [submit]
+
+          return [...props.actions, submit]
+        })
+
+        const rootErrors = computed(() =>
+          props.form.errors?.filter((error) => error.path?.length === 0),
+        )
+
+        return () => (
+          <form
+            class="w-full"
+            onSubmit={(event) => {
+              event.preventDefault()
+              void props.form.submit()
+            }}
+          >
+            {slots.default?.()}
+            <div
+              style={{
+                display: rootErrors.value?.length || !props.actionsTeleportTo ? undefined : 'none',
+              }}
+              class="col-span-full flex w-full flex-col gap-4"
+            >
+              {rootErrors.value?.length ? (
+                <ul class="text-error text-sm">
+                  {rootErrors.value.map((error) => (
+                    <li key={`${String(error.path)}:${error.message}`}>
+                      {error.path}:{error.message}
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+
+              <hr class="h-px w-full text-(--ui-border-muted)" />
+
+              <div
+                style={{ display: props.actionsTeleportTo ? 'none' : undefined }}
+                class="flex items-center justify-end gap-4"
+              >
+                <Teleport defer disabled={!props.actionsTeleportTo} to={props.actionsTeleportTo}>
+                  <UActions
+                    defaults={{ variant: 'subtle' }}
+                    actions={actionsWithSubmit.value}
+                    class="contents!"
+                  />
+                </Teleport>
+              </div>
+            </div>
+          </form>
+        )
+      },
+    }),
+)

package/app/components/u/UImageWithFallback.tsx

@@ -0,0 +1,47 @@
+import type { VNode } from 'vue'
+import { useImage } from '@vueuse/core'
+import { USkeleton } from '#components'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      src?: string
+      alt?: string
+      fallbackSrc?: string
+    }
+    slots: {
+      default: () => VNode[]
+    }
+  }) =>
+    options(_, {
+      name: 'UImageWithFallback',
+      props: ['src', 'alt', 'fallbackSrc'],
+      emits: [],
+      setup: (props, { slots, attrs }) => {
+        const { error, isReady } = props.src
+          ? useImage(() => ({
+              src: props.src ?? '',
+            }))
+          : {
+              isReady: false,
+              error: true,
+            }
+
+        return () => {
+          if (toValue(isReady)) return <img src={props.src} alt={props.alt} />
+          if (!toValue(error)) return <USkeleton />
+
+          return (
+            <div>
+              {slots.default?.() ??
+                (props.fallbackSrc ? (
+                  <img src={props.fallbackSrc} {...attrs} />
+                ) : (
+                  <USkeleton {...attrs} />
+                ))}
+            </div>
+          )
+        }
+      },
+    }),
+)

package/app/components/u/UInputDatePicker.tsx

@@ -0,0 +1,94 @@
+import type { DateValue } from '@internationalized/date'
+import type { CalendarProps, InputDateProps } from '@nuxt/ui'
+import type { ComponentPublicInstance } from 'vue'
+import { UButton, UCalendar, UInputDate, UPopover } from '#components'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      modelValue: DateValue | null
+      input?: InputDateProps
+      calendar?: CalendarProps
+      disabled?: boolean
+      loading?: boolean
+    }
+    emits: {
+      'blur': () => void
+      'update:modelValue': (value: DateValue | null) => void
+    }
+  }) =>
+    options(_, {
+      name: 'UInputDatePicker',
+      props: ['modelValue', 'input', 'calendar', 'disabled', 'loading'],
+      emits: ['blur', 'update:modelValue'],
+      setup: (props, { emit }) => {
+        // only the slice of `UInputDate`'s exposed API the popover anchors to
+        const inputDate = ref<{ inputsRef: ComponentPublicInstance[] }>()
+        const open = ref(false)
+
+        watch(open, () => {
+          if (!open.value) emit('blur')
+        })
+
+        return () => (
+          <UInputDate
+            ref={inputDate}
+            {...props.input}
+            disabled={props.disabled}
+            loading={props.loading}
+            range={false}
+            modelValue={props.modelValue}
+            onBlur={() => emit('blur')}
+            onUpdate:modelValue={(value) => emit('update:modelValue', value ?? null)}
+            v-slots={vSlots(UInputDate, {
+              trailing: () => [
+                <UPopover
+                  open={open.value}
+                  onUpdate:open={(value) => {
+                    open.value = value
+                  }}
+                  reference={inputDate.value?.inputsRef[3]?.$el as HTMLElement | undefined}
+                  v-slots={vSlots(UPopover, {
+                    content: () => [
+                      <div class="p-2">
+                        <UCalendar
+                          {...props.calendar}
+                          modelValue={props.modelValue ?? undefined}
+                          multiple={false}
+                          range={false}
+                          onUpdate:modelValue={(value) => {
+                            emit('update:modelValue', value ?? null)
+                            open.value = false
+                          }}
+                        />
+                        {props.modelValue ? (
+                          <div class="flex justify-end">
+                            <UButton
+                              variant="ghost"
+                              icon="tabler:trash"
+                              color="error"
+                              label="Löschen"
+                              size="sm"
+                              onClick={() => emit('update:modelValue', null)}
+                            />
+                          </div>
+                        ) : null}
+                      </div>,
+                    ],
+                  })}
+                >
+                  <UButton
+                    color="neutral"
+                    variant="link"
+                    size="sm"
+                    icon="i-lucide-calendar"
+                    class="px-0"
+                  />
+                </UPopover>,
+              ],
+            })}
+          />
+        )
+      },
+    }),
+)

package/app/components/u/UInputDateRangePicker.tsx

@@ -0,0 +1,143 @@
+import type { CalendarDate, DateValue } from '@internationalized/date'
+import type { ComponentPublicInstance } from 'vue'
+import { toCalendarDate } from '@internationalized/date'
+import { UButton, UCalendar, UInputDate, UPopover } from '#components'
+
+type Range = {
+  start: CalendarDate
+  end: CalendarDate
+}
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      modelValue: Range | null
+    }
+    emits: {
+      'update:modelValue': (value: Range | null) => void
+    }
+  }) =>
+    options(_, {
+      name: 'UInputDateRangePicker',
+      props: ['modelValue'],
+      emits: ['update:modelValue'],
+      setup: (props, { emit }) => {
+        // only the slice of `UInputDate`'s exposed API the popover anchors to
+        const inputDate = ref<{ inputsRef: ComponentPublicInstance[] }>()
+
+        const localModel = shallowRef({
+          start: props.modelValue?.start,
+          end: props.modelValue?.end,
+        } as
+          | {
+              start: DateValue | undefined
+              end: DateValue | undefined
+            }
+          | undefined
+          | null)
+
+        const open = ref(false)
+
+        let syncingModelValue = false
+        watch(
+          localModel,
+          (newValue) => {
+            // prevent infinite loop
+            if (syncingModelValue) return
+
+            if (newValue?.start && newValue.end) {
+              emit('update:modelValue', {
+                start: toCalendarDate(newValue.start),
+                end: toCalendarDate(newValue.end),
+              })
+              open.value = false
+            } else if (!newValue?.start && !newValue?.end) {
+              emit('update:modelValue', null)
+              open.value = false
+            }
+          },
+          {
+            flush: 'sync',
+          },
+        )
+
+        watch(
+          () => props.modelValue,
+          (newValue) => {
+            syncingModelValue = true
+            localModel.value = newValue
+              ? {
+                  start: newValue.start,
+                  end: newValue.end,
+                }
+              : {
+                  start: undefined,
+                  end: undefined,
+                }
+            syncingModelValue = false
+          },
+        )
+
+        return () => (
+          <UInputDate
+            ref={inputDate}
+            modelValue={localModel.value}
+            onUpdate:modelValue={(value) => {
+              localModel.value = value
+            }}
+            range
+            v-slots={vSlots(UInputDate, {
+              trailing: () => [
+                <UPopover
+                  open={open.value}
+                  onUpdate:open={(value) => {
+                    open.value = value
+                  }}
+                  reference={inputDate.value?.inputsRef[0]?.$el as HTMLElement | undefined}
+                  v-slots={vSlots(UPopover, {
+                    content: () => [
+                      <div class="p-2">
+                        <UCalendar
+                          modelValue={localModel.value}
+                          onUpdate:modelValue={(value) => {
+                            localModel.value = value
+                          }}
+                          numberOfMonths={2}
+                          range
+                        />
+                        {props.modelValue ? (
+                          <div class="flex justify-end">
+                            <UButton
+                              variant="ghost"
+                              icon="tabler:trash"
+                              color="error"
+                              label="Löschen"
+                              size="sm"
+                              onClick={() => {
+                                localModel.value = {
+                                  start: undefined,
+                                  end: undefined,
+                                }
+                              }}
+                            />
+                          </div>
+                        ) : null}
+                      </div>,
+                    ],
+                  })}
+                >
+                  <UButton
+                    color="neutral"
+                    variant="link"
+                    size="sm"
+                    icon="i-lucide-calendar"
+                    class="px-0"
+                  />
+                </UPopover>,
+              ],
+            })}
+          />
+        )
+      },
+    }),
+)

package/app/components/u/UInputDurationMinutes.tsx

@@ -0,0 +1,106 @@
+import type { InputEmits, InputProps } from '@nuxt/ui'
+import type { MaskOptions } from 'maska'
+import { regex } from 'arkregex'
+import { vMaska } from 'maska/vue'
+import { withDirectives } from 'vue'
+import { UInput } from '#components'
+
+// `String.raw` would widen the pattern to `string`, and `arkregex` types the match groups off
+// the literal
+// eslint-disable-next-line unicorn/prefer-string-raw
+const parser = regex('^-?(?<hours>\\d{1,}):?(?<minutes>\\d{1,2})?$')
+
+const maskOptions: MaskOptions = {
+  // S: sign, H: hours (unlimited), 5: tens digit of minutes, D: digit of minutes
+  mask: 'SH:5D',
+  tokens: {
+    'S': { pattern: /[-+]/, optional: true },
+    'D': { pattern: /\d/ },
+    'H': { pattern: /\d/, multiple: true },
+    '5': {
+      pattern: /[0-5]/,
+      transform(char) {
+        // clamp char to max 5, otherwise maska would just block input if user tries to input 6-9
+        const num = Number.parseInt(char)
+        if (Number.isNaN(num)) return char
+        return num > 5 ? '5' : char
+      },
+    },
+  },
+}
+
+export default defineSetupComponent(
+  (_: {
+    props: Omit<InputProps<string>, 'modelValue' | 'defaultValue' | 'modelModifiers'> & {
+      modelValue: number | null
+      showZeroMinutes?: boolean
+    }
+    // the rest reaches `UInput` as inherited attributes
+    propKeys: 'modelValue' | 'showZeroMinutes'
+    emits: AsEmits<Omit<InputEmits<string>, 'update:modelValue'>> & {
+      'update:modelValue': (value: number | null) => void
+    }
+  }) =>
+    options(_, {
+      name: 'UInputDurationMinutes',
+      props: ['modelValue', 'showZeroMinutes'],
+      emits: ['blur', 'change', 'update:modelValue'],
+      setup: (props, { emit }) => {
+        const duration = computed({
+          get: () => {
+            if (props.modelValue === null) return null
+
+            const absoluteMinutes = Math.abs(props.modelValue)
+
+            const hours = Math.floor(absoluteMinutes / 60)
+            const minutes = absoluteMinutes % 60
+            const sign = props.modelValue < 0 ? '-' : ''
+
+            // don't always add :00 if minutes is 0
+            if (minutes > 0 || props.showZeroMinutes)
+              return `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
+
+            return `${sign}${hours.toString()}`
+          },
+          set: (val: string | null) => {
+            if (!val) {
+              emit('update:modelValue', null)
+              return
+            }
+
+            const parsed = parser.exec(val)
+            if (!parsed) {
+              emit('update:modelValue', null)
+              return
+            }
+
+            const isNegative = val.startsWith('-')
+
+            const hours = Number.parseInt(parsed.groups.hours) * 60
+            const minutes = parsed.groups.minutes ? Number.parseInt(parsed.groups.minutes) : 0
+
+            emit('update:modelValue', isNegative ? -(hours + minutes) : hours + minutes)
+          },
+        })
+
+        return () =>
+          withDirectives(
+            <UInput
+              modelValue={duration.value}
+              onUpdate:modelValue={(value) => {
+                duration.value = value
+              }}
+              modelModifiers={{
+                nullable: true,
+                lazy: true,
+              }}
+              placeholder="HH:mm"
+              trailingIcon="lucide:timer"
+              onBlur={(event) => emit('blur', event)}
+              onChange={(event) => emit('change', event)}
+            />,
+            [[vMaska, maskOptions]],
+          )
+      },
+    }),
+)

package/app/components/u/UInputFile.tsx

@@ -0,0 +1,132 @@
+import type { FileUploadEmits, FileUploadProps } from '@nuxt/ui'
+import { UFileUpload } from '#components'
+
+export default defineSetupComponent(
+  <Multiple extends boolean = false>(_: {
+    props: FileUploadProps<Multiple> & {
+      modelValue?: (Multiple extends true ? File[] : File) | null
+      /**
+       * Set to `false` to disable compression
+       */
+      compression?:
+        | boolean
+        | {
+            /**
+             * @default 1920
+             */
+            maxDimension?: number
+            /**
+             * @default 0.85
+             */
+            quality?: number
+            /**
+             * @default 'image/webp'
+             */
+            outputType?: string
+          }
+    }
+    // the rest reaches `UFileUpload` as inherited attributes
+    propKeys: 'modelValue' | 'multiple' | 'compression'
+    emits: AsEmits<FileUploadEmits> & {
+      'compressed': (event: {
+        original: File
+        compressed: File
+        savedBytes: number
+        savedPercentage: number
+      }) => void
+      'update:modelValue': (value: (Multiple extends true ? File[] : File) | null) => void
+    }
+  }) =>
+    options(_, {
+      name: 'UInputFile',
+      props: ['modelValue', 'multiple', 'compression'],
+      emits: ['change', 'compressed', 'update:modelValue'],
+      setup: (props, { emit }) => {
+        type Files = Multiple extends true ? File[] : File
+
+        const compression = () => props.compression ?? true
+
+        const compressedFiles = new WeakMap<File, File>()
+
+        async function compressImage(file: File) {
+          const option = compression()
+          if (option === false) return file
+          if (compressedFiles.has(file)) return compressedFiles.get(file)!
+
+          const maxDimension = typeof option === 'object' ? (option.maxDimension ?? 1920) : 1920
+          const quality = typeof option === 'object' ? (option.quality ?? 0.85) : 0.85
+          const outputType =
+            typeof option === 'object' ? (option.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'))
+
+                // eslint-disable-next-line unicorn/no-unsafe-string-replacement -- the extension comes from `outputType`, not from user input
+                const name = file.name.replace(/\.\w+$/, `.${outputType.split('/', 2)[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()
+          })
+        }
+
+        async function forwardFiles(files: File | File[] | null | undefined) {
+          if (!files) {
+            emit('update:modelValue', files ?? null)
+            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 compressImage(file)
+            }),
+          )
+
+          emit('update:modelValue', (props.multiple ? compressed : compressed[0]!) as Files)
+        }
+
+        return () => (
+          <UFileUpload
+            multiple={props.multiple}
+            modelValue={props.modelValue}
+            onUpdate:modelValue={(files) => {
+              void forwardFiles(files)
+            }}
+            onChange={(event) => emit('change', event)}
+          />
+        )
+      },
+    }),
+)