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

package/app/components/layout/LayoutPage.vue

@@ -1,174 +0,0 @@
-<script setup lang="ts">
-import type {
-  ButtonProps,
-  FooterProps,
-  FooterSlots,
-  HeaderProps,
-  HeaderSlots,
-  NavigationMenuItem,
-  NavigationMenuProps,
-} from '@nuxt/ui'
-import type { AddPropertyPrefix } from '../../types/helpers'
-import { keys, omit, pickBy, pipe, pullObject } from 'remeda'
-
-defineProps<{
-  header?: {
-    logo?: {
-      src?: string
-      iconSrc?: string
-    }
-    navigation?: NavigationMenuProps
-    actions?: ButtonProps[]
-    ui?: HeaderProps['ui']
-    mobileActions?: ButtonProps[]
-  }
-  footer?: {
-    items?: NavigationMenuItem[]
-    actions?: ButtonProps[]
-    ui?: FooterProps['ui']
-  }
-}>()
-
-const slots = defineSlots<
-  {
-    default: any
-  } & AddPropertyPrefix<HeaderSlots, 'header'> &
-    AddPropertyPrefix<FooterSlots, 'footer'>
->()
-
-const omitHeaderSlots = [
-  'header-title',
-  'header-right',
-  'header-default',
-  'header-body',
-] satisfies (keyof typeof slots)[]
-
-const headerSlots = computed(() =>
-  pipe(
-    slots,
-    pickBy((_, key) => key.startsWith('header-')),
-    omit(omitHeaderSlots),
-    keys(),
-    pullObject(
-      (key) => key.replace('header-', ''),
-      (key) => key,
-    ),
-  ),
-)
-
-const omitFooterSlots = [
-  'footer-left',
-  'footer-right',
-  'footer-default',
-] satisfies (keyof typeof slots)[]
-
-const footerSlots = computed(() =>
-  pipe(
-    slots,
-    pickBy((_, key) => key.startsWith('footer-')),
-    omit(omitFooterSlots),
-    keys(),
-    pullObject(
-      (key) => key.replace('footer-', ''),
-      (key) => key,
-    ),
-  ),
-)
-</script>
-
-<!-- eslint-disable vue/require-explicit-slots -->
-<template>
-  <div>
-    <UHeader v-if="header" :ui="header.ui">
-      <template v-if="header.logo || slots['header-title']" #title>
-        <slot name="header-title">
-          <template v-if="header.logo">
-            <img v-if="header.logo.src" class="h-5 w-auto shrink-0" :src="header.logo.src" />
-            <img
-              v-if="!header.logo.src && header.logo.iconSrc"
-              class="size-5"
-              :src="header.logo.iconSrc"
-            />
-          </template>
-        </slot>
-      </template>
-
-      <UNavigationMenu v-if="header.navigation" v-bind="header.navigation" />
-
-      <template v-if="header.actions || slots['header-right']" #right>
-        <slot name="header-right">
-          <UActions
-            v-if="header.mobileActions"
-            class="md:hidden"
-            :actions="header.mobileActions"
-            :defaults="{
-              variant: 'subtle',
-            }"
-          />
-          <UActions
-            v-if="header.actions"
-            class="max-sm:hidden"
-            :actions="header.actions"
-            :defaults="{
-              variant: 'subtle',
-            }"
-          />
-        </slot>
-      </template>
-
-      <template #body>
-        <slot name="header-body">
-          <div class="flex flex-col gap-4">
-            <UNavigationMenu
-              v-if="header.navigation"
-              v-bind="header.navigation"
-              orientation="vertical"
-            />
-            <USeparator v-if="header.navigation && header.actions" />
-            <UActions
-              v-if="header.actions"
-              class="flex-col"
-              :actions="header.actions"
-              :defaults="{
-                variant: 'subtle',
-              }"
-            />
-          </div>
-        </slot>
-      </template>
-
-      <template v-for="(originalName, slotName) in headerSlots" #[slotName]="slotData">
-        <!-- @vue-ignore -->
-        <slot :name="originalName" v-bind="slotData || {}" />
-      </template>
-    </UHeader>
-    <UMain>
-      <slot />
-    </UMain>
-    <UFooter v-if="footer" :ui="footer.ui">
-      <template #left>
-        <slot name="footer-left">
-          <p class="text-muted text-sm">Copyright © {{ new Date().getFullYear() }}</p>
-        </slot>
-      </template>
-
-      <UNavigationMenu v-if="footer.items" :items="footer.items" variant="link" />
-
-      <template v-if="footer.actions || slots['footer-right']" #right>
-        <slot name="footer-right">
-          <UActions
-            :actions="footer.actions"
-            :defaults="{
-              variant: 'ghost',
-            }"
-          />
-        </slot>
-      </template>
-
-      <template v-for="(originalName, slotName) in footerSlots" #[slotName]="slotData">
-        <!-- @vue-ignore -->
-        <slot :name="originalName" v-bind="slotData || {}" />
-      </template>
-    </UFooter>
-  </div>
-</template>

package/app/components/layout/LayoutSidebar.vue

@@ -1,117 +0,0 @@
-<script setup lang="ts">
-import type {
-  ArrayOrNested,
-  AvatarProps,
-  DashboardSearchProps,
-  DashboardSidebarProps,
-  DropdownMenuItem,
-  NavigationMenuItem,
-  NavigationMenuProps,
-} from '@nuxt/ui'
-import { mergeSlotClass } from '../../utils/ui'
-
-defineProps<{
-  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']
-}>()
-
-const slots = defineSlots<{
-  'default': any
-  'logo'?: any
-  'icon'?: any
-}>()
-
-const config = useRuntimeConfig()
-</script>
-
-<template>
-  <UDashboardGroup storage="local" :storage-key="`${config.public.projectId}-dashboard`" unit="rem">
-    <UDashboardSidebar
-      v-bind="sidebar"
-      class="bg-white"
-      mode="drawer"
-      collapsible
-      :ui="{
-        ...sidebar?.ui,
-        header: mergeSlotClass(sidebar?.ui?.header, 'border-b border-default'),
-        footer: mergeSlotClass(sidebar?.ui?.footer, 'border-t border-default'),
-      }"
-    >
-      <template
-        v-if="logo?.src || logo?.iconSrc || slots.logo || slots.icon"
-        #header="{ collapsed }"
-      >
-        <slot v-if="!collapsed" name="logo">
-          <img v-if="logo?.src" class="h-5 w-auto shrink-0" :src="logo.src" />
-        </slot>
-        <div v-if="collapsed || (!logo?.src && !slots.logo)" :class="{ 'mx-auto': collapsed }">
-          <slot name="icon">
-            <img v-if="logo?.iconSrc" class="size-5" :src="logo.iconSrc" />
-          </slot>
-        </div>
-      </template>
-      <template #default="{ collapsed }">
-        <!-- height and negative margins line the border up with the `LayoutNavbar` toolbar's, cancelling the sidebar body's padding -->
-        <div
-          v-if="search"
-          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>
-
-        <UNavigationMenu
-          v-if="items"
-          :collapsed="collapsed"
-          :items="items"
-          orientation="vertical"
-          :ui="itemsUi"
-        />
-
-        <UNavigationMenu
-          v-if="bottomItems"
-          :collapsed="collapsed"
-          :items="bottomItems"
-          orientation="vertical"
-          class="mt-auto"
-          :ui="bottomItemsUi"
-        />
-      </template>
-      <template v-if="userMenu" #footer="{ collapsed }">
-        <UDropdownMenu :items="userMenu.items">
-          <UButton
-            :label="collapsed ? undefined : userMenu.name"
-            :trailing-icon="collapsed ? undefined : 'ph:caret-up-down'"
-            :icon="userMenu.avatar ? undefined : 'lucide:user-round'"
-            :avatar="userMenu.avatar"
-            color="neutral"
-            variant="ghost"
-            block
-            :square="collapsed"
-            class="data-[state=open]:bg-elevated"
-            :ui="{
-              leadingIcon: 'text-accented',
-              trailingIcon: 'text-dimmed',
-            }"
-          />
-        </UDropdownMenu>
-      </template>
-    </UDashboardSidebar>
-
-    <UDashboardSearch v-if="search" :color-mode="false" v-bind="search" />
-
-    <slot />
-  </UDashboardGroup>
-</template>

package/app/components/modals/ConfirmModal.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts" generic="const O extends RadioGroupItem[], R extends ConfirmModalResult<O>">
-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'
-
-export type ConfirmModalProps<O extends RadioGroupItem[]> = {
-  title: string
-  confirmLabel: string
-  confirmDisabled?: () => boolean
-  text?: string | ReturnType<typeof templateParts>
-  slotRef?: ComponentPublicInstance
-  options?: O
-  color?: ButtonProps['color']
-}
-
-defineProps<ConfirmModalProps<O>>()
-
-const emit = defineEmits<{
-  close: [result: R]
-}>()
-
-const selectedOption = ref<RadioGroupProps<O>['modelValue']>()
-</script>
-
-<template>
-  <UModal
-    :title
-    :close="{ onClick: () => emit('close', false as R) }"
-    :dismissible="false"
-    :ui="{ header: 'border-b-0!', body: 'pt-0!' }"
-  >
-    <template #body>
-      <div class="flex flex-col gap-4">
-        <p v-if="text && typeof text === 'string'">{{ text }}</p>
-        <TemplateText v-else-if="text && typeof text === 'object'" :text />
-
-        <SlotRef :slot-ref />
-
-        <URadioGroup
-          v-model="selectedOption"
-          :items="options"
-          variant="table"
-          :color="color ?? 'error'"
-        />
-      </div>
-    </template>
-    <template #footer>
-      <div class="flex w-full justify-end gap-2">
-        <UButton
-          color="neutral"
-          variant="soft"
-          label="Abbrechen"
-          @click="() => emit('close', false as R)"
-        />
-        <UButton
-          :color="color ?? 'error'"
-          :label="confirmLabel"
-          :disabled="(!!options?.length && selectedOption === undefined) || confirmDisabled?.()"
-          @click="() => emit('close', (selectedOption ?? true) as R)"
-        />
-      </div>
-    </template>
-  </UModal>
-</template>

package/app/components/modals/EntityCrudModal.vue

@@ -1,109 +0,0 @@
-<script
-  setup
-  lang="ts"
-  generic="
-    Schema extends FormSchema,
-    QueryData extends NonNullable<FormSourceValues<Schema>>,
-    Select extends QueryData = QueryData,
-    Id extends string | null = string | null
-  "
->
-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 { useForm } from '@falcondev-oss/form-vue'
-import { useQuery } from '@tanstack/vue-query'
-import modalTheme from '#build/ui/modal'
-
-const props = defineProps<{
-  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>
-}>()
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-defineSlots<{
-  default: (props: { form: ReturnType<typeof useForm<Schema>>; data: typeof data.value }) => any
-}>()
-
-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)
-
-// const { tryLeave, onLeave } = usePreventLeave()
-// onLeave(() => {
-//   console.warn('leave')
-//   closeHandle.value?.()
-// })
-</script>
-
-<template>
-  <UModal :close="false" :title="`${name} ${id ? 'bearbeiten' : 'erstellen'}`" :dismissible="false">
-    <template #actions>
-      <UButton
-        :class="modalTheme.slots.close"
-        :icon="appConfig.ui.icons.close"
-        color="neutral"
-        variant="ghost"
-        aria-label="Schließen"
-        loading-auto
-        @click="
-          async () => {
-            // if (!(await tryLeave())) return
-            closeHandle?.()
-          }
-        "
-      />
-    </template>
-    <template #body="{ close }">
-      <Sync v-model:output="closeHandle" :input="close" />
-      <UForm
-        class="flex flex-col gap-2"
-        :form
-        :submit-label="id ? 'Speichern' : 'Erstellen'"
-        :actions-teleport-to="`#${formActionsTeleportId}`"
-      >
-        <slot :form :data />
-      </UForm>
-    </template>
-    <template #footer>
-      <div :id="formActionsTeleportId" class="flex w-full justify-end gap-2">
-        <UButton color="neutral" variant="soft" label="Abbrechen" @click="() => emit('close')" />
-      </div>
-    </template>
-  </UModal>
-</template>

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

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { ButtonProps } from '@nuxt/ui'
-import { UModal } from '#components'
-
-defineProps<{
-  actions: ButtonProps[]
-  title: string
-  description?: string
-}>()
-</script>
-
-<template>
-  <UModal :title :description :ui="{ content: 'max-w-fit', footer: 'flex flex-col gap-4' }">
-    <template #footer>
-      <UButton
-        v-for="action of actions"
-        :key="action.label"
-        variant="subtle"
-        class="w-full justify-center"
-        size="xl"
-        v-bind="action"
-      />
-    </template>
-  </UModal>
-</template>

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

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  title: string
-  description: string
-  submitLabel: string
-}>()
-
-const emit = defineEmits<{ close: [boolean] }>()
-</script>
-
-<template>
-  <UModal :close="{ onClick: () => emit('close', false) }" :title :description class="max-w-sm">
-    <template #footer>
-      <div class="flex w-full justify-end gap-2">
-        <UButton
-          variant="ghost"
-          color="neutral"
-          label="Abbrechen"
-          @click="() => emit('close', false)"
-        />
-        <UButton :label="submitLabel" color="error" @click="() => emit('close', true)" />
-      </div>
-    </template>
-  </UModal>
-</template>

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

@@ -1,37 +0,0 @@
-<script setup lang="ts" generic="T extends Extract<RadioGroupItem, object>">
-import type { GetItemValue, NestedItem, RadioGroupItem } from '#ui/types'
-import { UModal } from '#components'
-
-const props = defineProps<{
-  items: T[]
-  defaultValue: GetItemValue<T[], 'value', NestedItem<T>>
-  title: string
-  submitButtonLabel: string
-  description?: string
-}>()
-
-const emit = defineEmits<{
-  close: [value: T['value'] | undefined]
-}>()
-
-const selectedValue = ref(props.defaultValue)
-</script>
-
-<template>
-  <UModal :title :description>
-    <template #body>
-      <div class="flex flex-col gap-4">
-        <URadioGroup v-model="selectedValue" variant="table" :items />
-        <div class="flex w-full justify-end gap-4">
-          <UButton
-            label="Abbrechen"
-            variant="ghost"
-            color="neutral"
-            @click="() => emit('close', undefined)"
-          />
-          <UButton :label="submitButtonLabel" @click="() => emit('close', selectedValue)" />
-        </div>
-      </div>
-    </template>
-  </UModal>
-</template>

package/app/components/u/UActions.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { ButtonProps } from '@nuxt/ui'
-
-defineProps<{
-  actions?: ButtonProps[]
-  defaults?: Partial<ButtonProps>
-}>()
-
-function getActionKey(action: ButtonProps) {
-  return action.label || action.icon
-}
-</script>
-
-<template>
-  <div v-if="actions" class="flex gap-4">
-    <UButton
-      v-for="action of actions"
-      :key="getActionKey(action)"
-      v-bind="{ ...defaults, ...action }"
-    />
-  </div>
-  <div v-else />
-</template>

package/app/components/u/UAuthForm.vue

@@ -1,36 +0,0 @@
-<script
-  setup
-  lang="ts"
-  generic="T extends FormSchema = FormSchema<object>, F extends AuthFormField = AuthFormField"
->
-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'
-import { useForwardProps } from 'reka-ui'
-
-const props = defineProps<
-  Omit<AuthFormProps<T, F>, 'onSubmit'> & {
-    onSubmit?: (event: FormSubmitEvent<InferOutput<T>>) => void | Promise<void>
-  }
->()
-const slots = defineSlots<AuthFormSlots<Reactive<InferInput<T>>, F>>()
-
-const forwarded = useForwardProps(props)
-</script>
-
-<template>
-  <NuxtUIAuthForm v-bind="forwarded">
-    <template v-for="(_, name) in slots" #[name]="slotData">
-      <!-- @vue-ignore -->
-      <slot :name="name" v-bind="slotData || {}" />
-    </template>
-  </NuxtUIAuthForm>
-</template>

package/app/components/u/UCustomApp.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { AppProps } from '@nuxt/ui'
-import { useForwardProps } from 'reka-ui'
-
-const props = defineProps<{
-  app?: AppProps
-}>()
-
-const forwarded = useForwardProps(props)
-
-const config = useRuntimeConfig()
-</script>
-
-<template>
-  <UApp v-bind="forwarded.app" :nonce="config.public.projectId">
-    <NuxtLoadingIndicator color="var(--color-brand-secondary, var(--color-brand-primary))" />
-    <Suspense>
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
-    </Suspense>
-  </UApp>
-</template>