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

package/app/components/modals/EntityCrudModal.tsx

@@ -0,0 +1,124 @@
+import type { FormSchema, FormSourceValues, FormSubmitValues } from '@falcondev-oss/form-core'
+import type { DefaultError, UseQueryOptions } from '@tanstack/vue-query'
+import type { If, IsNever } from 'type-fest'
+import type { VNode } from 'vue'
+import { useForm } from '@falcondev-oss/form-vue'
+import { useQuery } from '@tanstack/vue-query'
+import modalTheme from '#build/ui/modal'
+import { Sync, UButton, UForm, UModal } from '#components'
+
+export default defineSetupComponent(
+  <
+    Schema extends FormSchema,
+    QueryData extends NonNullable<FormSourceValues<Schema>>,
+    Select extends QueryData = QueryData,
+    Id extends string | null = string | null,
+  >(_: {
+    props: {
+      id: Id
+      name: string
+      schema: Schema
+      getQueryOptions: (
+        id: Id,
+      ) => UseQueryOptions<If<IsNever<Select>, QueryData, any>, DefaultError, Select>
+      newValues: NonNullable<FormSourceValues<Schema>>
+      mutate: (values: FormSubmitValues<Schema> & { id: Id }) => Promise<unknown>
+    }
+    emits: {
+      close: () => void
+    }
+    slots: {
+      default: (props: {
+        form: ReturnType<typeof useForm<Schema>>
+        data: Select | undefined
+      }) => VNode[]
+    }
+  }) =>
+    options(_, {
+      name: 'EntityCrudModal',
+      props: ['id', 'name', 'schema', 'getQueryOptions', 'newValues', 'mutate'],
+      emits: ['close'],
+      setup: (props, { emit, slots }) => {
+        const toast = useToast()
+        const appConfig = useAppConfig()
+
+        const { data, isLoading } = useQuery(computed(() => props.getQueryOptions(props.id)))
+
+        const form = useForm({
+          schema: props.schema,
+          sourceValues: () => {
+            if (isLoading.value) return
+
+            return data.value ?? props.newValues
+          },
+          async submit({ values }) {
+            await props.mutate({
+              ...values,
+              id: props.id,
+            })
+
+            emit('close')
+            toast.add({
+              title: `${props.name} ${props.id ? 'aktualisiert' : 'erstellt'}`,
+              color: 'success',
+              icon: 'lucide:check',
+            })
+          },
+        })
+
+        const formActionsTeleportId = useId()
+        const closeHandle = ref<(() => void) | null>(null)
+
+        return () => (
+          <UModal
+            close={false}
+            title={`${props.name} ${props.id ? 'bearbeiten' : 'erstellen'}`}
+            dismissible={false}
+            v-slots={vSlots(UModal, {
+              actions: () => [
+                <UButton
+                  class={modalTheme.slots.close}
+                  icon={appConfig.ui.icons.close}
+                  color="neutral"
+                  variant="ghost"
+                  aria-label="Schließen"
+                  loadingAuto
+                  onClick={() => {
+                    closeHandle.value?.()
+                  }}
+                />,
+              ],
+              body: ({ close }) => [
+                <Sync
+                  input={close}
+                  output={closeHandle.value}
+                  onUpdate:output={(value: (() => void) | null) => {
+                    closeHandle.value = value
+                  }}
+                />,
+                <UForm
+                  class="flex flex-col gap-2"
+                  form={form}
+                  submitLabel={props.id ? 'Speichern' : 'Erstellen'}
+                  actionsTeleportTo={`#${formActionsTeleportId}`}
+                  v-slots={{
+                    default: () => slots.default?.({ form, data: data.value }) ?? [],
+                  }}
+                />,
+              ],
+              footer: () => [
+                <div id={formActionsTeleportId} class="flex w-full justify-end gap-2">
+                  <UButton
+                    color="neutral"
+                    variant="soft"
+                    label="Abbrechen"
+                    onClick={() => emit('close')}
+                  />
+                </div>,
+              ],
+            })}
+          />
+        )
+      },
+    }),
+)

package/app/components/overlay/modal/ModalActions.tsx

@@ -0,0 +1,36 @@
+import type { ButtonProps } from '@nuxt/ui'
+import { UButton, UModal } from '#components'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      actions: ButtonProps[]
+      title: string
+      description?: string
+    }
+  }) =>
+    options(_, {
+      name: 'ModalActions',
+      props: ['actions', 'title', 'description'],
+      emits: [],
+      setup: (props) => () => (
+        <UModal
+          title={props.title}
+          description={props.description}
+          ui={{ content: 'max-w-fit', footer: 'flex flex-col gap-4' }}
+          v-slots={vSlots(UModal, {
+            footer: () =>
+              props.actions.map((action) => (
+                <UButton
+                  key={action.label}
+                  variant="subtle"
+                  class="w-full justify-center"
+                  size="xl"
+                  {...action}
+                />
+              )),
+          })}
+        />
+      ),
+    }),
+)

package/app/components/overlay/modal/ModalConfirm.tsx

@@ -0,0 +1,46 @@
+import { UButton, UModal } from '#components'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      title: string
+      description: string
+      submitLabel: string
+    }
+    emits: {
+      close: (confirmed: boolean) => void
+    }
+  }) =>
+    options(_, {
+      name: 'ModalConfirm',
+      props: ['title', 'description', 'submitLabel'],
+      emits: ['close'],
+      setup:
+        (props, { emit }) =>
+        () => (
+          <UModal
+            close={{ onClick: () => emit('close', false) }}
+            title={props.title}
+            description={props.description}
+            class="max-w-sm"
+            v-slots={vSlots(UModal, {
+              footer: () => [
+                <div class="flex w-full justify-end gap-2">
+                  <UButton
+                    variant="ghost"
+                    color="neutral"
+                    label="Abbrechen"
+                    onClick={() => emit('close', false)}
+                  />
+                  <UButton
+                    label={props.submitLabel}
+                    color="error"
+                    onClick={() => emit('close', true)}
+                  />
+                </div>,
+              ],
+            })}
+          />
+        ),
+    }),
+)

package/app/components/overlay/modal/ModalRadioGroup.tsx

@@ -0,0 +1,62 @@
+import type { GetItemValue, NestedItem, RadioGroupItem } from '#ui/types'
+import { UButton, UModal, URadioGroup } from '#components'
+
+export default defineSetupComponent(
+  <T extends Extract<RadioGroupItem, object>>(_: {
+    props: {
+      items: T[]
+      defaultValue: GetItemValue<T[], 'value', NestedItem<T>>
+      title: string
+      submitButtonLabel: string
+      description?: string
+    }
+    emits: {
+      close: (value: T['value'] | undefined) => void
+    }
+  }) =>
+    options(_, {
+      name: 'ModalRadioGroup',
+      props: ['items', 'defaultValue', 'title', 'submitButtonLabel', 'description'],
+      emits: ['close'],
+      setup: (props, { emit }) => {
+        // `RadioGroupItem['value']` is `any` in `@nuxt/ui`, so neither the picked value nor what
+        // the radio group reports back can be typed any tighter — hence the disables below
+        const selectedValue = ref<T['value'] | undefined>(props.defaultValue)
+
+        return () => (
+          <UModal
+            title={props.title}
+            description={props.description}
+            v-slots={vSlots(UModal, {
+              body: () => [
+                <div class="flex flex-col gap-4">
+                  <URadioGroup
+                    // eslint-disable-next-line ts/no-unsafe-assignment
+                    modelValue={selectedValue.value}
+                    onUpdate:modelValue={(value) => {
+                      selectedValue.value = value
+                    }}
+                    variant="table"
+                    items={props.items}
+                  />
+                  <div class="flex w-full justify-end gap-4">
+                    <UButton
+                      label="Abbrechen"
+                      variant="ghost"
+                      color="neutral"
+                      onClick={() => emit('close', undefined)}
+                    />
+                    <UButton
+                      label={props.submitButtonLabel}
+                      // eslint-disable-next-line ts/no-unsafe-argument
+                      onClick={() => emit('close', selectedValue.value)}
+                    />
+                  </div>
+                </div>,
+              ],
+            })}
+          />
+        )
+      },
+    }),
+)

package/app/components/u/UActions.tsx

@@ -0,0 +1,30 @@
+import type { ButtonProps } from '@nuxt/ui'
+import { UButton } from '#components'
+
+function getActionKey(action: ButtonProps): string | undefined {
+  return action.label || (action.icon as string | undefined)
+}
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      actions?: ButtonProps[]
+      defaults?: Partial<ButtonProps>
+    }
+  }) =>
+    options(_, {
+      name: 'UActions',
+      props: ['actions', 'defaults'],
+      emits: [],
+      setup: (props) => () =>
+        props.actions ? (
+          <div class="flex gap-4">
+            {props.actions.map((action) => (
+              <UButton key={getActionKey(action)} {...{ ...props.defaults, ...action }} />
+            ))}
+          </div>
+        ) : (
+          <div />
+        ),
+    }),
+)

package/app/components/u/UAuthForm.tsx

@@ -0,0 +1,30 @@
+import type {
+  AuthFormField,
+  AuthFormProps,
+  AuthFormSlots,
+  FormSchema,
+  FormSubmitEvent,
+  InferInput,
+  InferOutput,
+} from '@nuxt/ui'
+import type { Reactive } from 'vue'
+import NuxtUIAuthForm from '@nuxt/ui/components/AuthForm.vue'
+
+export default defineSetupComponent(
+  <T extends FormSchema = FormSchema<object>, F extends AuthFormField = AuthFormField>(_: {
+    props: Omit<AuthFormProps<T, F>, 'onSubmit'> & {
+      onSubmit?: (event: FormSubmitEvent<InferOutput<T>>) => void | Promise<void>
+    }
+    // nothing is read here, so every prop reaches `NuxtUIAuthForm` as an inherited attribute
+    propKeys: never
+    slots: AuthFormSlots<Reactive<InferInput<T>>, F>
+  }) =>
+    options(_, {
+      name: 'UAuthForm',
+      props: [],
+      emits: [],
+      setup:
+        (_props, { slots }) =>
+        () => <NuxtUIAuthForm v-slots={slots} />,
+    }),
+)

package/app/components/u/UCustomApp.tsx

@@ -0,0 +1,33 @@
+import type { AppProps } from '@nuxt/ui'
+import { de } from '@nuxt/ui/locale'
+import { useForwardProps } from 'reka-ui'
+import { Suspense } from 'vue'
+import { NuxtLayout, NuxtLoadingIndicator, NuxtPage, UApp } from '#components'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      app?: AppProps
+    }
+  }) =>
+    options(_, {
+      name: 'UCustomApp',
+      props: ['app'],
+      emits: [],
+      setup: (props) => {
+        const forwarded = useForwardProps(props)
+        const config = useRuntimeConfig()
+
+        return () => (
+          <UApp locale={de} {...forwarded.value.app} nonce={config.public.projectId}>
+            <NuxtLoadingIndicator color="var(--color-brand-secondary, var(--color-brand-primary))" />
+            <Suspense>
+              <NuxtLayout>
+                <NuxtPage />
+              </NuxtLayout>
+            </Suspense>
+          </UApp>
+        )
+      },
+    }),
+)

package/app/components/u/UField.tsx

@@ -0,0 +1,211 @@
+import type { FormField } from '@falcondev-oss/form-core'
+import type { FormFieldProps, FormFieldSlots } from '@nuxt/ui'
+import type { VNode, WritableComputedRef } from 'vue'
+import { useForwardProps } from 'reka-ui'
+import * as R from 'remeda'
+import { DevOnly, UFormField, UIcon, UPopover } from '#components'
+import { mergeSlotClass } from '../../utils/ui'
+
+type InputProps<T> = {
+  'modelValue': T
+  'onUpdate:modelValue': (value: T) => void
+  'onBlur': () => void
+  'disabled': boolean
+  'loading': boolean
+  'modelModifiers': { nullable: true }
+  'placeholder'?: string
+}
+
+function renderErrors(errors: string[]) {
+  if (errors.length === 1) return <p>{errors.join('\n')}</p>
+
+  return (
+    <ul>
+      {errors.map((error, index) => (
+        <li key={error + index} class="list-inside">
+          {error}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default defineSetupComponent(
+  <T,>(_: {
+    props: FormFieldProps & {
+      field: FormField<T>
+      errorInline?: boolean
+      errorPreferPlaceholder?: boolean
+    }
+    slots: {
+      default: (slot: {
+        bind: InputProps<T>
+        model: WritableComputedRef<T>
+        field: FormField<T>
+      }) => VNode[]
+    } & Omit<FormFieldSlots, 'default'>
+  }) =>
+    options(_, {
+      name: 'UField',
+      props: [
+        'as',
+        'name',
+        'errorPattern',
+        'label',
+        'description',
+        'help',
+        'error',
+        'hint',
+        'size',
+        'required',
+        'eagerValidation',
+        'validateOnInputDelay',
+        'orientation',
+        'class',
+        'ui',
+        'field',
+        'errorInline',
+        'errorPreferPlaceholder',
+      ],
+      emits: [],
+      setup: (props, { slots }) => {
+        const forwardedProps = useForwardProps(props)
+
+        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
+
+          const hint =
+            field.schema.maxLength === undefined ||
+            field.schema.maxLength === field.schema.minLength
+              ? 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 bind = computed(() => {
+          const field = forwardedProps.value.field
+
+          const placeholder = (field.errors && field.errors[0]) || field.schema.default?.toString()
+
+          return {
+            'modelValue': field.value,
+            'onUpdate:modelValue': (value) => field.handleChange(value),
+            'onBlur': () => field.handleBlur(),
+            'disabled': field.disabled,
+            'loading': field.isPending,
+            placeholder,
+            'modelModifiers': { nullable: true },
+          } satisfies InputProps<T>
+        })
+
+        const model = computed({
+          get() {
+            return forwardedProps.value.field.value
+          },
+          set(value: T) {
+            forwardedProps.value.field.handleChange(value)
+          },
+        })
+
+        return () => {
+          const field = props.field
+          /** the error is only worth showing where it can't be read off the placeholder */
+          const showErrors =
+            !!field.errors && (props.errorPreferPlaceholder ? String(field.value).length > 0 : true)
+
+          return (
+            <UFormField
+              {...formFieldProps.value}
+              ui={{
+                ...formFieldProps.value.ui,
+                hint: mergeSlotClass(
+                  formFieldProps.value.ui?.hint,
+                  isOverMaxLength.value ? 'text-error' : '',
+                ),
+                error: mergeSlotClass(formFieldProps.value.ui?.error, 'mt-1!'),
+              }}
+              error={!!field.errors}
+              class={['u-field', props.class]}
+              v-slots={vSlots(UFormField, {
+                default: () =>
+                  slots.default?.({
+                    bind: bind.value,
+                    model,
+                    field: forwardedProps.value.field,
+                  }) ?? [
+                    <DevOnly>
+                      <p class="font-black text-red-500">UField missing slot</p>
+                    </DevOnly>,
+                  ],
+
+                ...(props.errorInline && showErrors
+                  ? {
+                      error: () => [
+                        renderErrors(field.errors!),
+                        ...(typeof props.error === 'string' ? [<>{props.error}</>] : []),
+                      ],
+                    }
+                  : {
+                      hint: ({ hint }) => [
+                        <span class="flex items-center gap-1.5">
+                          {showErrors ? (
+                            <UPopover
+                              mode="hover"
+                              openDelay={0}
+                              ui={{
+                                content: 'bg-error-50 ring-error-200! rounded py-1 px-2',
+                              }}
+                              v-slots={vSlots(UPopover, {
+                                content: () => [
+                                  <div class="max-w-sm text-xs text-(--ui-color-neutral-800)">
+                                    {renderErrors(field.errors!)}
+                                  </div>,
+                                ],
+                              })}
+                            >
+                              <UIcon name="lucide:circle-alert" class="text-error" />
+                            </UPopover>
+                          ) : null}
+
+                          {hint}
+                        </span>,
+                      ],
+                    }),
+
+                ...(field.schema.examples && {
+                  help: () => [
+                    Array.isArray(field.schema.examples) ? (
+                      <ul>
+                        {field.schema.examples.map((example, index) => (
+                          <li key={index}>{example}</li>
+                        ))}
+                      </ul>
+                    ) : (
+                      <p>{field.schema.examples}</p>
+                    ),
+                  ],
+                }),
+
+                ...R.omit(slots, ['default']),
+              })}
+            />
+          )
+        }
+      },
+    }),
+)