@falcondev-oss/nuxt-layers-base 0.21.0 → 0.22.0

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

@@ -7,12 +7,14 @@ const overlay = useOverlay()
 
 const form = useForm({
   schema: z.object({
-    duration: z.number(),
-    dateIso: z.string(),
+    duration: z.number().meta({ title: 'Duration' }),
+    dateIso: z.string().meta({ title: 'Datum' }),
+    text: z.string().max(10).meta({ title: 'Text' }).optional(),
   }),
   sourceValues: () => ({
     dateIso: null,
     duration: null,
+    text: '',
   }),
   async submit({ values }) {
     await new Promise((resolve) => setTimeout(resolve, 2000))
@@ -230,6 +232,7 @@ const columns = useTableColumns<typeof data>(
       />
     </UCard>
     <UCard
+      class="max-w-sm"
       :ui="{
         body: 'flex flex-col gap-4 items-start ',
       }"
@@ -240,20 +243,24 @@ const columns = useTableColumns<typeof data>(
           title: 'test',
           description: 'wow',
         }"
+        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>
         <UField
-          v-slot="props"
+          v-slot="{ props }"
           :field="
             form.fields.dateIso.$use({
               translate: dateValueIsoTranslator(),
             })
           "
         >
-          <UInputDatePicker v-bind="props" />
+          <UInputDatePicker class="w-full" v-bind="props" />
         </UField>
-        <UField v-slot="props" :field="form.fields.duration.$use()">
-          <UInputDurationMinutes v-bind="props" />
+        <UField v-slot="{ props }" :field="form.fields.duration.$use()">
+          <UInputDurationMinutes class="w-full" v-bind="props" />
         </UField>
       </UForm>
     </UCard>

package/.playground/app.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { de } from '@nuxt/ui/locale'
+import { Settings } from 'luxon'
+import { authRedirect } from './middleware/auth.global'
+import { channel } from './utils/channel'
+
+Settings.throwOnInvalid = true
+Settings.defaultLocale = 'de'
+
+// redirect when auth status changes through broadcast channel
+const route = useRoute()
+useEventListener<MessageEvent>(channel, 'message', (event) => {
+  if (event.data.type === 'auth') {
+    authRedirect(route)
+  }
+})
+</script>
+
+<template>
+  <UCustomApp
+    :app="{
+      locale: de,
+    }"
+  />
+</template>

package/app/components/u/UField.vue

@@ -3,7 +3,7 @@ import type { FormField } from '@falcondev-oss/form-core'
 import type { FormFieldProps, FormFieldSlots } from '@nuxt/ui'
 import type { ModelModifiers } from '@nuxt/ui/runtime/types/input.js'
 import { useForwardProps } from 'reka-ui'
-import { omit } from 'remeda'
+import * as R from 'remeda'
 
 type FieldSlotProps<T> = {
   'modelValue': T
@@ -12,6 +12,7 @@ type FieldSlotProps<T> = {
   'disabled': boolean
   'loading': boolean
   'modelModifiers'?: Pick<ModelModifiers, 'nullable'>
+  'placeholder'?: string
 }
 
 const props = defineProps<
@@ -21,46 +22,106 @@ const props = defineProps<
 >()
 const slots = defineSlots<
   {
-    default: (props: Omit<FieldSlotProps<T>, 'modelModifiers'>) => any
+    default: (slot: {
+      props: Omit<FieldSlotProps<T>, 'modelModifiers'>
+      field: FormField<T>
+    }) => any
   } & Omit<FormFieldSlots, 'default'>
 >()
 
 const forwardedProps = useForwardProps(props)
 
-const formFieldProps = computed(() => {
+const isOverMaxLength = computed(() => {
+  const field = forwardedProps.value.field
+
+  return field.schema.maxLength === undefined || field.value == null
+    ? false
+    : (field.value as string | number)?.toString().length > field.schema.maxLength
+})
+
+const formFieldProps = computed<FormFieldProps>(() => {
   const { field, ...rest } = forwardedProps.value
-  return rest
+
+  const hint =
+    field.schema.maxLength === undefined
+      ? undefined
+      : `${(field.value as string | number | null)?.toString().length ?? 0}/${field.schema.maxLength}`
+
+  return {
+    required: field.schema.required,
+    label: field.schema.title,
+    description: field.schema.description,
+    hint,
+    ...R.omitBy(rest, (v) => v === undefined),
+  }
 })
 
-const slotProps = computed(
-  () =>
-    ({
-      'modelValue': forwardedProps.value.field.value,
-      'onUpdate:modelValue': (value) => forwardedProps.value.field.handleChange(value),
-      'onBlur': () => forwardedProps.value.field.handleBlur(),
-      'disabled': forwardedProps.value.field.disabled,
-      'loading': forwardedProps.value.field.isPending,
-      'modelModifiers': {
-        nullable: true,
-      },
-    }) satisfies FieldSlotProps<T>,
-)
+const inputProps = computed(() => {
+  const field = forwardedProps.value.field
+
+  const placeholder = field.errors && field.errors.join('\n')
+
+  return {
+    'modelValue': field.value,
+    'onUpdate:modelValue': (value) => field.handleChange(value),
+    'onBlur': () => field.handleBlur(),
+    'disabled': field.disabled,
+    'loading': field.isPending,
+    'modelModifiers': {
+      nullable: true,
+    },
+    placeholder,
+  } satisfies FieldSlotProps<T>
+})
 </script>
 
 <template>
   <UFormField
     v-bind="formFieldProps"
-    :error="forwardedProps.field.errors && forwardedProps.field.errors.join('\n')"
+    :ui="{
+      hint: isOverMaxLength ? 'text-error' : '',
+    }"
+    :error="!!field.errors"
   >
-    <slot v-bind="slotProps">
+    <template #hint="{ hint }">
+      <span class="flex items-center gap-1.5">
+        <UPopover
+          v-if="!!field.errors"
+          mode="hover"
+          :delay-duration="0"
+          :ui="{
+            content: 'bg-error-50 ring-error-200! rounded py-1 px-2',
+          }"
+        >
+          <UIcon name="lucide:circle-alert" class="text-error" />
+          <template #content>
+            <p class="text-(--ui-color-neutral-800) max-w-sm whitespace-normal text-xs">
+              {{ field.errors.join('\n') }}
+            </p>
+          </template>
+        </UPopover>
+
+        {{ hint }}
+      </span>
+    </template>
+
+    <slot v-bind="{ props: inputProps, field: forwardedProps.field }">
       <DevOnly>
         <p class="font-black text-red-500">UField missing slot</p>
       </DevOnly>
     </slot>
 
-    <template v-for="(_, name) in omit(slots, ['default'])" #[name]="slotData">
+    <template v-for="(_, name) in R.omit(slots, ['default'])" #[name]="slotData">
       <!-- @vue-ignore -->
       <slot :name="name" v-bind="slotData || {}" />
     </template>
   </UFormField>
 </template>
+
+<style scoped>
+:deep([aria-invalid='true']) {
+  &::placeholder {
+    color: var(--ui-color-error-400);
+  }
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": "github:falcondev-oss/nuxt-layers",
@@ -14,8 +14,8 @@
     "pnpm": "10"
   },
   "dependencies": {
-    "@falcondev-oss/form-core": "^0.19.3",
-    "@falcondev-oss/form-vue": "^0.19.3",
+    "@falcondev-oss/form-core": "^0.21.0",
+    "@falcondev-oss/form-vue": "^0.21.0",
     "@falcondev-oss/trpc-typed-form-data": "^0.4.1",
     "@falcondev-oss/trpc-vue-query": "^0.5.2",
     "@iconify-json/lucide": "^1.2.90",