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

package/app/app.tsx

@@ -0,0 +1,14 @@
+import { UCustomApp } from '#components'
+
+function render() {
+  return <UCustomApp />
+}
+
+export default defineSetupComponent((_: object) =>
+  options(_, {
+    name: 'App',
+    props: [],
+    emits: [],
+    setup: () => render,
+  }),
+)

package/app/assets/css/base.css

@@ -3,6 +3,7 @@
 
 @import './theme.css';
 @import './utilities.css';
+@import './variants.css';
 
 @layer base {
   html,
@@ -33,3 +34,8 @@
     flex-shrink: 0;
   }
 }
+
+.u-field [aria-invalid='true']::placeholder {
+  color: var(--ui-color-error-500);
+  opacity: 0.5;
+}

package/app/components/layout/LayoutAuth.tsx

@@ -0,0 +1,22 @@
+import type { VNode } from 'vue'
+import { UPageCard } from '#components'
+
+export default defineSetupComponent(
+  (_: {
+    slots: {
+      default: () => VNode[]
+    }
+  }) =>
+    options(_, {
+      name: 'LayoutAuth',
+      props: [],
+      emits: [],
+      setup:
+        (_props, { slots }) =>
+        () => (
+          <div class="flex min-h-full flex-col items-center justify-center gap-4 p-4">
+            <UPageCard class="w-full max-w-md">{slots.default?.()}</UPageCard>
+          </div>
+        ),
+    }),
+)

package/app/components/layout/LayoutNavbar.tsx

@@ -0,0 +1,193 @@
+import type {
+  BreadcrumbItem,
+  BreadcrumbProps,
+  DashboardNavbarProps,
+  DashboardNavbarSlots,
+  DashboardPanelProps,
+  DashboardToolbarProps,
+  NavigationMenuItem,
+  NavigationMenuProps,
+} from '@nuxt/ui'
+import type { MaybeRefOrGetter, Ref, VNode } from 'vue'
+import type { ToolbarTool } from '../../composables/useToolbar'
+import type { AddPropertyPrefix } from '../../types/helpers'
+import * as R from 'remeda'
+import {
+  ForwardSlots,
+  UBreadcrumb,
+  UDashboardNavbar,
+  UDashboardPanel,
+  UDashboardSidebarCollapse,
+  UDashboardToolbar,
+  UNavigationMenu,
+} from '#components'
+import { toolbarToolsKey } from '../../composables/useToolbar'
+import { mergeSlotClass } from '../../utils/ui'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      panel?: DashboardPanelProps
+      navbar?: {
+        sidebarToggle?: boolean
+        title?: string
+        breadcrumb?: BreadcrumbItem[]
+        breadcrumbUi?: BreadcrumbProps<BreadcrumbItem>['ui']
+        ui?: DashboardNavbarProps['ui']
+      }
+      tabs?: {
+        items?: NavigationMenuItem[]
+        ui?: NavigationMenuProps['ui']
+      }
+      tools?: {
+        items?: NavigationMenuItem[]
+        ui?: NavigationMenuProps['ui']
+      }
+      toolbarUi?: DashboardToolbarProps['ui']
+    }
+    slots: {
+      'default': () => VNode[]
+      'navbar-title'?: () => VNode[]
+      'navbar-trailing'?: () => VNode[]
+      'navbar-actions'?: () => VNode[]
+    } & AddPropertyPrefix<DashboardNavbarSlots, 'navbar'>
+  }) =>
+    options(_, {
+      name: 'LayoutNavbar',
+      props: ['panel', 'navbar', 'tabs', 'tools', 'toolbarUi'],
+      emits: [],
+      setup: (props, { slots }) => {
+        // rendered manually in the `left` slot below
+        const omitNavbarSlots = [
+          'navbar-left',
+          'navbar-leading',
+          'navbar-title',
+          'navbar-trailing',
+          'navbar-right',
+          'navbar-actions',
+        ] satisfies (keyof typeof slots)[]
+        const navbarSlots = computed(() =>
+          R.pipe(
+            slots,
+            R.pickBy((_slot, key) => key.startsWith('navbar-')),
+            R.omit(omitNavbarSlots),
+            R.mapKeys((key) => key.replace('navbar-', '')),
+          ),
+        )
+
+        // added by the content rendered inside this navbar through `useToolbar()`
+        // `ref()`'s deep unwrapping blows up on the recursive `NavigationMenuItem` type
+        const providedTools = ref([]) as Ref<MaybeRefOrGetter<ToolbarTool>[]>
+        provide(toolbarToolsKey, providedTools)
+
+        const toolItems = computed(() => [
+          ...(props.tools?.items ?? []),
+          ...providedTools.value.map((tool) => toValue(tool)),
+        ])
+
+        const navbarUi = computed<DashboardNavbarProps['ui']>(() => ({
+          ...props.navbar?.ui,
+          toggle: mergeSlotClass(props.navbar?.ui?.toggle, '-ml-1'),
+          ...(props.navbar?.breadcrumb && {
+            root: mergeSlotClass(props.navbar.ui?.root, 'h-auto min-h-(--ui-header-height) py-2'),
+          }),
+        }))
+
+        return () => (
+          <UDashboardPanel
+            {...props.panel}
+            v-slots={vSlots(UDashboardPanel, {
+              header: () => [
+                ...(props.navbar
+                  ? [
+                      <ForwardSlots slots={navbarSlots.value}>
+                        <UDashboardNavbar
+                          ui={navbarUi.value}
+                          class="bg-white"
+                          title={props.navbar.title}
+                          v-slots={vSlots(UDashboardNavbar, {
+                            left: () => [
+                              ...(props.navbar?.sidebarToggle
+                                ? [<UDashboardSidebarCollapse class="-ml-1" />]
+                                : []),
+
+                              <div class="flex min-w-0 flex-col items-start gap-0.5">
+                                <div class="flex min-w-0 items-center gap-1.5">
+                                  <h1 class="text-highlighted truncate font-semibold">
+                                    {slots['navbar-title']?.() ?? props.navbar?.title}
+                                  </h1>
+                                  {slots['navbar-trailing']?.()}
+                                </div>
+
+                                {props.navbar?.breadcrumb ? (
+                                  <UBreadcrumb
+                                    items={props.navbar.breadcrumb}
+                                    ui={{
+                                      ...props.navbar.breadcrumbUi,
+                                      link: mergeSlotClass(
+                                        props.navbar.breadcrumbUi?.link,
+                                        'text-xs',
+                                      ),
+                                      separatorIcon: mergeSlotClass(
+                                        props.navbar.breadcrumbUi?.separatorIcon,
+                                        'size-3.5',
+                                      ),
+                                    }}
+                                  />
+                                ) : null}
+                              </div>,
+                            ],
+                            right: (slotProps) => [
+                              <>{slots['navbar-right']?.(slotProps)}</>,
+                              <div id="navbar-actions" class="flex items-center gap-2">
+                                {slots['navbar-actions']?.()}
+                              </div>,
+                            ],
+                          })}
+                        />
+                      </ForwardSlots>,
+                    ]
+                  : []),
+                ...(props.tabs || toolItems.value.length > 0
+                  ? [
+                      <UDashboardToolbar
+                        ui={props.toolbarUi}
+                        class="bg-white *:first:-ml-2"
+                        v-slots={vSlots(UDashboardToolbar, {
+                          left: () => [
+                            props.tabs ? (
+                              <UNavigationMenu
+                                items={props.tabs.items}
+                                highlight
+                                variant="link"
+                                ui={props.tabs.ui}
+                              />
+                            ) : (
+                              <UNavigationMenu
+                                items={toolItems.value}
+                                highlight
+                                ui={props.tools?.ui}
+                              />
+                            ),
+                          ],
+                          ...(props.tabs && {
+                            right: () => [
+                              <UNavigationMenu
+                                items={toolItems.value}
+                                highlight
+                                ui={props.tools?.ui}
+                              />,
+                            ],
+                          }),
+                        })}
+                      />,
+                    ]
+                  : []),
+              ],
+              body: () => slots.default?.() ?? [],
+            })}
+          />
+        )
+      },
+    }),
+)

package/app/components/layout/LayoutPage.tsx

@@ -0,0 +1,183 @@
+import type {
+  ButtonProps,
+  FooterProps,
+  FooterSlots,
+  HeaderProps,
+  HeaderSlots,
+  NavigationMenuItem,
+  NavigationMenuProps,
+} from '@nuxt/ui'
+import type { VNode } from 'vue'
+import type { AddPropertyPrefix } from '../../types/helpers'
+import { mapKeys, omit, pickBy, pipe } from 'remeda'
+import { UActions, UFooter, UHeader, UMain, UNavigationMenu, USeparator } from '#components'
+
+const actionDefaults = {
+  variant: 'subtle',
+} satisfies Partial<ButtonProps>
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      header?: {
+        logo?: {
+          src?: string
+          iconSrc?: string
+        }
+        navigation?: NavigationMenuProps
+        actions?: ButtonProps[]
+        ui?: HeaderProps['ui']
+        mobileActions?: ButtonProps[]
+      }
+      footer?: {
+        items?: NavigationMenuItem[]
+        actions?: ButtonProps[]
+        ui?: FooterProps['ui']
+      }
+    }
+    slots: {
+      default: () => VNode[]
+    } & AddPropertyPrefix<HeaderSlots, 'header'> &
+      AddPropertyPrefix<FooterSlots, 'footer'>
+  }) =>
+    options(_, {
+      name: 'LayoutPage',
+      props: ['header', 'footer'],
+      emits: [],
+      setup: (props, { slots }) => {
+        const omitHeaderSlots = [
+          'header-title',
+          'header-right',
+          'header-default',
+          'header-body',
+        ] satisfies (keyof typeof slots)[]
+
+        const headerSlots = computed(() =>
+          pipe(
+            slots,
+            pickBy((_slot, key) => key.startsWith('header-')),
+            omit(omitHeaderSlots),
+            mapKeys((key) => key.replace('header-', '')),
+          ),
+        )
+
+        const omitFooterSlots = [
+          'footer-left',
+          'footer-right',
+          'footer-default',
+        ] satisfies (keyof typeof slots)[]
+
+        const footerSlots = computed(() =>
+          pipe(
+            slots,
+            pickBy((_slot, key) => key.startsWith('footer-')),
+            omit(omitFooterSlots),
+            mapKeys((key) => key.replace('footer-', '')),
+          ),
+        )
+
+        return () => (
+          <div>
+            {props.header ? (
+              <UHeader
+                ui={props.header.ui}
+                v-slots={vSlots(UHeader, {
+                  ...((props.header.logo || slots['header-title']) && {
+                    title: () =>
+                      slots['header-title']?.() ??
+                      (props.header?.logo
+                        ? [
+                            ...(props.header.logo.src
+                              ? [<img class="h-5 w-auto shrink-0" src={props.header.logo.src} />]
+                              : []),
+                            ...(!props.header.logo.src && props.header.logo.iconSrc
+                              ? [<img class="size-5" src={props.header.logo.iconSrc} />]
+                              : []),
+                          ]
+                        : []),
+                  }),
+
+                  default: () =>
+                    props.header?.navigation
+                      ? [<UNavigationMenu {...props.header.navigation} />]
+                      : [],
+
+                  ...((props.header.actions || slots['header-right']) && {
+                    right: () =>
+                      slots['header-right']?.() ?? [
+                        ...(props.header?.mobileActions
+                          ? [
+                              <UActions
+                                class="md:hidden"
+                                actions={props.header.mobileActions}
+                                defaults={actionDefaults}
+                              />,
+                            ]
+                          : []),
+                        ...(props.header?.actions
+                          ? [
+                              <UActions
+                                class="max-sm:hidden"
+                                actions={props.header.actions}
+                                defaults={actionDefaults}
+                              />,
+                            ]
+                          : []),
+                      ],
+                  }),
+
+                  body: () =>
+                    slots['header-body']?.() ?? [
+                      <div class="flex flex-col gap-4">
+                        {props.header?.navigation ? (
+                          <UNavigationMenu {...props.header.navigation} orientation="vertical" />
+                        ) : null}
+                        {props.header?.navigation && props.header.actions ? <USeparator /> : null}
+                        {props.header?.actions ? (
+                          <UActions
+                            class="flex-col"
+                            actions={props.header.actions}
+                            defaults={actionDefaults}
+                          />
+                        ) : null}
+                      </div>,
+                    ],
+
+                  ...headerSlots.value,
+                })}
+              />
+            ) : null}
+            <UMain>{slots.default?.()}</UMain>
+            {props.footer ? (
+              <UFooter
+                ui={props.footer.ui}
+                v-slots={vSlots(UFooter, {
+                  left: () =>
+                    slots['footer-left']?.() ?? [
+                      <p class="text-muted text-sm">Copyright © {new Date().getFullYear()}</p>,
+                    ],
+
+                  default: () =>
+                    props.footer?.items
+                      ? [<UNavigationMenu items={props.footer.items} variant="link" />]
+                      : [],
+
+                  ...((props.footer.actions || slots['footer-right']) && {
+                    right: () =>
+                      slots['footer-right']?.() ?? [
+                        <UActions
+                          actions={props.footer?.actions}
+                          defaults={{ variant: 'ghost' }}
+                        />,
+                      ],
+                  }),
+
+                  ...footerSlots.value,
+                })}
+              />
+            ) : null}
+          </div>
+        )
+      },
+    }),
+)

package/app/components/layout/LayoutSidebar.tsx

@@ -0,0 +1,167 @@
+import type {
+  ArrayOrNested,
+  AvatarProps,
+  DashboardSearchProps,
+  DashboardSidebarProps,
+  DropdownMenuItem,
+  NavigationMenuItem,
+  NavigationMenuProps,
+} from '@nuxt/ui'
+import type { VNode } from 'vue'
+import {
+  UButton,
+  UDashboardGroup,
+  UDashboardSearch,
+  UDashboardSearchButton,
+  UDashboardSidebar,
+  UDropdownMenu,
+  UNavigationMenu,
+} from '#components'
+import { mergeSlotClass } from '../../utils/ui'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      sidebar?: DashboardSidebarProps
+      logo?: {
+        src?: string
+        iconSrc?: string
+      }
+      search?: DashboardSearchProps
+      items?: NavigationMenuItem[]
+      bottomItems?: NavigationMenuItem[]
+      userMenu?: {
+        name: string
+        avatar?: AvatarProps
+        items: ArrayOrNested<DropdownMenuItem>
+      }
+      itemsUi?: NavigationMenuProps['ui']
+      bottomItemsUi?: NavigationMenuProps['ui']
+    }
+    slots: {
+      default: () => VNode[]
+      logo?: () => VNode[]
+      icon?: () => VNode[]
+    }
+  }) =>
+    options(_, {
+      name: 'LayoutSidebar',
+      props: [
+        'sidebar',
+        'logo',
+        'search',
+        'items',
+        'bottomItems',
+        'userMenu',
+        'itemsUi',
+        'bottomItemsUi',
+      ],
+      emits: [],
+      setup: (props, { slots }) => {
+        const config = useRuntimeConfig()
+
+        return () => (
+          <UDashboardGroup
+            storage="local"
+            storageKey={`${config.public.projectId}-dashboard`}
+            unit="rem"
+          >
+            <UDashboardSidebar
+              {...props.sidebar}
+              class="bg-white"
+              mode="drawer"
+              collapsible
+              ui={{
+                ...props.sidebar?.ui,
+                header: mergeSlotClass(props.sidebar?.ui?.header, 'border-b border-default'),
+                footer: mergeSlotClass(props.sidebar?.ui?.footer, 'border-t border-default'),
+              }}
+              v-slots={vSlots(UDashboardSidebar, {
+                ...((props.logo?.src || props.logo?.iconSrc || slots.logo || slots.icon) && {
+                  header: ({ collapsed }) => [
+                    ...(collapsed
+                      ? []
+                      : (slots.logo?.() ??
+                        (props.logo?.src
+                          ? [<img class="h-5 w-auto shrink-0" src={props.logo.src} />]
+                          : []))),
+                    ...(collapsed || (!props.logo?.src && !slots.logo)
+                      ? [
+                          <div class={{ 'mx-auto': collapsed }}>
+                            {slots.icon?.() ??
+                              (props.logo?.iconSrc ? (
+                                <img class="size-5" src={props.logo.iconSrc} />
+                              ) : null)}
+                          </div>,
+                        ]
+                      : []),
+                  ],
+                }),
+                default: ({ collapsed }) => [
+                  ...(props.search
+                    ? [
+                        // height and negative margins line the border up with the `LayoutNavbar` toolbar's, cancelling the sidebar body's padding
+                        <div class="border-default -mx-4 -mt-2 -mb-2 flex h-[calc(--spacing(12)+1px)] shrink-0 items-center border-b px-4 sm:max-lg:-mx-6 sm:max-lg:px-6">
+                          <UDashboardSearchButton
+                            collapsed={collapsed}
+                            variant="outline"
+                            tooltip
+                            block
+                          />
+                        </div>,
+                      ]
+                    : []),
+                  ...(props.items
+                    ? [
+                        <UNavigationMenu
+                          collapsed={collapsed}
+                          items={props.items}
+                          orientation="vertical"
+                          ui={props.itemsUi}
+                        />,
+                      ]
+                    : []),
+                  ...(props.bottomItems
+                    ? [
+                        <UNavigationMenu
+                          collapsed={collapsed}
+                          items={props.bottomItems}
+                          orientation="vertical"
+                          class="mt-auto"
+                          ui={props.bottomItemsUi}
+                        />,
+                      ]
+                    : []),
+                ],
+                ...(props.userMenu && {
+                  footer: ({ collapsed }) => [
+                    <UDropdownMenu items={props.userMenu!.items}>
+                      <UButton
+                        label={collapsed ? undefined : props.userMenu!.name}
+                        trailingIcon={collapsed ? undefined : 'ph:caret-up-down'}
+                        icon={props.userMenu!.avatar ? undefined : 'lucide:user-round'}
+                        avatar={props.userMenu!.avatar}
+                        color="neutral"
+                        variant="ghost"
+                        block
+                        square={collapsed}
+                        class="data-[state=open]:bg-elevated"
+                        ui={{
+                          leadingIcon: 'text-accented',
+                          trailingIcon: 'text-dimmed',
+                        }}
+                      />
+                    </UDropdownMenu>,
+                  ],
+                }),
+              })}
+            />
+
+            {props.search ? <UDashboardSearch colorMode={false} {...props.search} /> : null}
+
+            {slots.default?.()}
+          </UDashboardGroup>
+        )
+      },
+    }),
+)

package/app/components/modals/ConfirmModal.tsx

@@ -0,0 +1,80 @@
+import type { ButtonProps, RadioGroupItem, RadioGroupProps } from '@nuxt/ui'
+import type { ComponentPublicInstance } from 'vue'
+import type { ConfirmModalResult } from '../../composables/confirm'
+import type { templateParts } from '../../utils/display'
+import { SlotRef, TemplateText, UButton, UModal, URadioGroup } from '#components'
+
+export type ConfirmModalProps<O extends RadioGroupItem[]> = {
+  title: string
+  confirmLabel: string
+  confirmDisabled?: () => boolean
+  text?: string | ReturnType<typeof templateParts>
+  slotRef?: ComponentPublicInstance
+  options?: O
+  color?: ButtonProps['color']
+}
+
+export default defineSetupComponent(
+  <const O extends RadioGroupItem[], R extends ConfirmModalResult<O>>(_: {
+    props: ConfirmModalProps<O>
+    emits: {
+      close: (result: R) => void
+    }
+  }) =>
+    options(_, {
+      name: 'ConfirmModal',
+      props: ['title', 'confirmLabel', 'confirmDisabled', 'text', 'slotRef', 'options', 'color'],
+      emits: ['close'],
+      setup: (props, { emit }) => {
+        const selectedOption = ref<RadioGroupProps<O>['modelValue']>()
+
+        return () => (
+          <UModal
+            title={props.title}
+            close={{ onClick: () => emit('close', false as R) }}
+            dismissible={false}
+            ui={{ header: 'border-b-0!', body: 'pt-0!' }}
+            v-slots={vSlots(UModal, {
+              body: () => [
+                <div class="flex flex-col gap-4">
+                  {props.text && typeof props.text === 'string' ? <p>{props.text}</p> : null}
+                  {typeof props.text === 'object' ? <TemplateText text={props.text} /> : null}
+
+                  <SlotRef slotRef={props.slotRef} />
+
+                  <URadioGroup
+                    modelValue={selectedOption.value}
+                    onUpdate:modelValue={(value) => {
+                      selectedOption.value = value
+                    }}
+                    items={props.options}
+                    variant="table"
+                    color={props.color ?? 'error'}
+                  />
+                </div>,
+              ],
+              footer: () => [
+                <div class="flex w-full justify-end gap-2">
+                  <UButton
+                    color="neutral"
+                    variant="soft"
+                    label="Abbrechen"
+                    onClick={() => emit('close', false as R)}
+                  />
+                  <UButton
+                    color={props.color ?? 'error'}
+                    label={props.confirmLabel}
+                    disabled={
+                      (!!props.options?.length && selectedOption.value === undefined) ||
+                      props.confirmDisabled?.()
+                    }
+                    onClick={() => emit('close', (selectedOption.value ?? true) as R)}
+                  />
+                </div>,
+              ],
+            })}
+          />
+        )
+      },
+    }),
+)