@falcondev-oss/nuxt-layers-base 0.31.2 → 0.32.0

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

@@ -145,7 +145,7 @@ const columns = useTableColumns<typeof data>(
     ]"
     :user-menu="{
       name: 'Benjamin Canac',
-      avatar: { src: 'https://github.com/benjamincanac.png' },
+      // avatar: { src: 'https://github.com/benjamincanac.png' },
       items: [
         {
           icon: 'lucide:log-out',
@@ -259,7 +259,7 @@ const columns = useTableColumns<typeof data>(
           class="flex flex-col gap-4"
         >
           {{ form.data }}
-          <UField v-slot="{ bind, field }" :field="form.fields.text.$use()">
+          <UField v-slot="{ bind, field }" :field="form.fields.text.$use()" error-inline>
             {{ field.schema }}
             <UInput class="w-full" v-bind="bind" />
           </UField>

package/app/components/layout/LayoutSidebar.vue

@@ -43,8 +43,8 @@ const config = useRuntimeConfig()
       collapsible
       :ui="{
         ...sidebar?.ui,
-        header: [sidebar?.ui?.header ?? '', 'border-b border-default'].join(' ').trim(),
-        footer: [sidebar?.ui?.footer ?? '', 'border-t border-default'].join(' ').trim(),
+        header: [sidebar?.ui?.header, 'border-b border-default'],
+        footer: [sidebar?.ui?.footer, 'border-t border-default'],
       }"
     >
       <template

package/app/components/u/UField.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="T">
 import type { FormField } from '@falcondev-oss/form-core'
 import type { FormFieldProps, FormFieldSlots } from '@nuxt/ui'
+import { createReusableTemplate } from '@vueuse/core'
 import { useForwardProps } from 'reka-ui'
 import * as R from 'remeda'
 
@@ -17,6 +18,8 @@ type InputProps<T> = {
 const props = defineProps<
   FormFieldProps & {
     field: FormField<T>
+    errorInline?: boolean
+    errorPreferPlaceholder?: boolean
   }
 >()
 
@@ -60,7 +63,7 @@ const formFieldProps = computed<FormFieldProps>(() => {
 const bind = computed(() => {
   const field = forwardedProps.value.field
 
-  const placeholder = (field.errors && field.errors.join('\n')) || field.schema.default?.toString()
+  const placeholder = (field.errors && field.errors[0]) || field.schema.default?.toString()
 
   return {
     'modelValue': field.value,
@@ -83,6 +86,12 @@ const model = computed({
 })
 
 const model_ = { model }
+
+const [DefineErrorTemplate, ErrorTemplate] = createReusableTemplate({
+  props: {
+    errors: Array as PropType<string[]>,
+  },
+})
 </script>
 
 <template>
@@ -90,15 +99,43 @@ const model_ = { model }
     v-bind="formFieldProps"
     :ui="{
       ...formFieldProps.ui,
-      hint: [formFieldProps.ui?.hint ?? '', isOverMaxLength ? 'text-error' : ''].join(' ').trim(),
+      hint: [formFieldProps.ui?.hint, isOverMaxLength ? 'text-error' : ''],
+      error: [formFieldProps.ui?.error, 'mt-1!'],
     }"
     :error="!!field.errors"
     :class="props.class"
   >
-    <template #hint="{ hint }">
+    <DefineErrorTemplate v-slot="{ errors }">
+      <p v-if="errors.length === 1">
+        {{ errors.join('\n') }}
+      </p>
+
+      <ul v-else>
+        <li v-for="(error, index) in errors" :key="error + index" class="list-inside">
+          {{ error }}
+        </li>
+      </ul>
+    </DefineErrorTemplate>
+
+    <template
+      v-if="
+        field.errors &&
+        errorInline &&
+        (errorPreferPlaceholder ? String(field.value).length > 0 : true)
+      "
+      #error
+    >
+      <ErrorTemplate :errors="field.errors" />
+
+      <template v-if="typeof error === 'string'">
+        {{ error }}
+      </template>
+    </template>
+
+    <template v-else #hint="{ hint }">
       <span class="flex items-center gap-1.5">
         <UPopover
-          v-if="!!field.errors"
+          v-if="!!field.errors && (errorPreferPlaceholder ? String(field.value).length > 0 : true)"
           mode="hover"
           :open-delay="0"
           :ui="{
@@ -108,15 +145,7 @@ const model_ = { model }
           <UIcon name="lucide:circle-alert" class="text-error" />
           <template #content>
             <div class="text-(--ui-color-neutral-800) max-w-sm text-xs">
-              <p v-if="field.errors.length === 1">
-                {{ field.errors.join('\n') }}
-              </p>
-
-              <ul v-else>
-                <li v-for="(error, index) in field.errors" :key="error + index" class="list-inside">
-                  {{ error }}
-                </li>
-              </ul>
+              <ErrorTemplate :errors="field.errors" />
             </div>
           </template>
         </UPopover>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.31.2",
+  "version": "0.32.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": "github:falcondev-oss/nuxt-layers",