@falcondev-oss/nuxt-layers-base 0.1.0

package/.nuxt/ui/user.ts

@@ -0,0 +1,101 @@
+const size = [
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative group/user",
+    "wrapper": "",
+    "name": "font-medium",
+    "description": "text-muted",
+    "avatar": "shrink-0"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "root": "flex items-center"
+      },
+      "vertical": {
+        "root": "flex flex-col"
+      }
+    },
+    "to": {
+      "true": {
+        "name": [
+          "text-default peer-hover:text-highlighted peer-focus-visible:text-highlighted",
+          "transition-colors"
+        ],
+        "description": [
+          "peer-hover:text-toned peer-focus-visible:text-toned",
+          "transition-colors"
+        ],
+        "avatar": "transform transition-transform duration-200 group-hover/user:scale-115 group-has-focus-visible/user:scale-115"
+      },
+      "false": {
+        "name": "text-highlighted",
+        "description": ""
+      }
+    },
+    "size": {
+      "3xs": {
+        "root": "gap-1",
+        "wrapper": "flex items-center gap-1",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "2xs": {
+        "root": "gap-1.5",
+        "wrapper": "flex items-center gap-1.5",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "xs": {
+        "root": "gap-1.5",
+        "wrapper": "flex items-center gap-1.5",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "sm": {
+        "root": "gap-2",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "md": {
+        "root": "gap-2",
+        "name": "text-sm",
+        "description": "text-xs"
+      },
+      "lg": {
+        "root": "gap-2.5",
+        "name": "text-sm",
+        "description": "text-sm"
+      },
+      "xl": {
+        "root": "gap-2.5",
+        "name": "text-base",
+        "description": "text-sm"
+      },
+      "2xl": {
+        "root": "gap-3",
+        "name": "text-base",
+        "description": "text-base"
+      },
+      "3xl": {
+        "root": "gap-3",
+        "name": "text-lg",
+        "description": "text-base"
+      }
+    }
+  },
+  "defaultVariants": {
+    "size": "md" as typeof size[number]
+  }
+}

package/.nuxt/ui-image-component.ts

@@ -0,0 +1 @@
+export default "img"

package/.nuxt/ui.css

@@ -0,0 +1,154 @@
+@source "/Users/louis/CodingProjects/falcondev-oss/nuxt-layers/base/app/**/*";
+@source inline("isolate");
+@source "./ui";
+
+@layer base {
+  body {
+    @apply antialiased text-default bg-default scheme-light dark:scheme-dark;
+  }
+}
+
+@theme static {
+  --color-old-neutral-50: oklch(98.5% 0 0);
+  --color-old-neutral-100: oklch(97% 0 0);
+  --color-old-neutral-200: oklch(92.2% 0 0);
+  --color-old-neutral-300: oklch(87% 0 0);
+  --color-old-neutral-400: oklch(70.8% 0 0);
+  --color-old-neutral-500: oklch(55.6% 0 0);
+  --color-old-neutral-600: oklch(43.9% 0 0);
+  --color-old-neutral-700: oklch(37.1% 0 0);
+  --color-old-neutral-800: oklch(26.9% 0 0);
+  --color-old-neutral-900: oklch(20.5% 0 0);
+  --color-old-neutral-950: oklch(14.5% 0 0);
+}
+
+@theme default inline {
+  --color-primary-50: var(--ui-color-primary-50);
+	--color-primary-100: var(--ui-color-primary-100);
+	--color-primary-200: var(--ui-color-primary-200);
+	--color-primary-300: var(--ui-color-primary-300);
+	--color-primary-400: var(--ui-color-primary-400);
+	--color-primary-500: var(--ui-color-primary-500);
+	--color-primary-600: var(--ui-color-primary-600);
+	--color-primary-700: var(--ui-color-primary-700);
+	--color-primary-800: var(--ui-color-primary-800);
+	--color-primary-900: var(--ui-color-primary-900);
+	--color-primary-950: var(--ui-color-primary-950);
+	--color-secondary-50: var(--ui-color-secondary-50);
+	--color-secondary-100: var(--ui-color-secondary-100);
+	--color-secondary-200: var(--ui-color-secondary-200);
+	--color-secondary-300: var(--ui-color-secondary-300);
+	--color-secondary-400: var(--ui-color-secondary-400);
+	--color-secondary-500: var(--ui-color-secondary-500);
+	--color-secondary-600: var(--ui-color-secondary-600);
+	--color-secondary-700: var(--ui-color-secondary-700);
+	--color-secondary-800: var(--ui-color-secondary-800);
+	--color-secondary-900: var(--ui-color-secondary-900);
+	--color-secondary-950: var(--ui-color-secondary-950);
+	--color-success-50: var(--ui-color-success-50);
+	--color-success-100: var(--ui-color-success-100);
+	--color-success-200: var(--ui-color-success-200);
+	--color-success-300: var(--ui-color-success-300);
+	--color-success-400: var(--ui-color-success-400);
+	--color-success-500: var(--ui-color-success-500);
+	--color-success-600: var(--ui-color-success-600);
+	--color-success-700: var(--ui-color-success-700);
+	--color-success-800: var(--ui-color-success-800);
+	--color-success-900: var(--ui-color-success-900);
+	--color-success-950: var(--ui-color-success-950);
+	--color-info-50: var(--ui-color-info-50);
+	--color-info-100: var(--ui-color-info-100);
+	--color-info-200: var(--ui-color-info-200);
+	--color-info-300: var(--ui-color-info-300);
+	--color-info-400: var(--ui-color-info-400);
+	--color-info-500: var(--ui-color-info-500);
+	--color-info-600: var(--ui-color-info-600);
+	--color-info-700: var(--ui-color-info-700);
+	--color-info-800: var(--ui-color-info-800);
+	--color-info-900: var(--ui-color-info-900);
+	--color-info-950: var(--ui-color-info-950);
+	--color-warning-50: var(--ui-color-warning-50);
+	--color-warning-100: var(--ui-color-warning-100);
+	--color-warning-200: var(--ui-color-warning-200);
+	--color-warning-300: var(--ui-color-warning-300);
+	--color-warning-400: var(--ui-color-warning-400);
+	--color-warning-500: var(--ui-color-warning-500);
+	--color-warning-600: var(--ui-color-warning-600);
+	--color-warning-700: var(--ui-color-warning-700);
+	--color-warning-800: var(--ui-color-warning-800);
+	--color-warning-900: var(--ui-color-warning-900);
+	--color-warning-950: var(--ui-color-warning-950);
+	--color-error-50: var(--ui-color-error-50);
+	--color-error-100: var(--ui-color-error-100);
+	--color-error-200: var(--ui-color-error-200);
+	--color-error-300: var(--ui-color-error-300);
+	--color-error-400: var(--ui-color-error-400);
+	--color-error-500: var(--ui-color-error-500);
+	--color-error-600: var(--ui-color-error-600);
+	--color-error-700: var(--ui-color-error-700);
+	--color-error-800: var(--ui-color-error-800);
+	--color-error-900: var(--ui-color-error-900);
+	--color-error-950: var(--ui-color-error-950);
+	--color-neutral-50: var(--ui-color-neutral-50);
+	--color-neutral-100: var(--ui-color-neutral-100);
+	--color-neutral-200: var(--ui-color-neutral-200);
+	--color-neutral-300: var(--ui-color-neutral-300);
+	--color-neutral-400: var(--ui-color-neutral-400);
+	--color-neutral-500: var(--ui-color-neutral-500);
+	--color-neutral-600: var(--ui-color-neutral-600);
+	--color-neutral-700: var(--ui-color-neutral-700);
+	--color-neutral-800: var(--ui-color-neutral-800);
+	--color-neutral-900: var(--ui-color-neutral-900);
+	--color-neutral-950: var(--ui-color-neutral-950);
+  --color-primary: var(--ui-primary);
+	--color-secondary: var(--ui-secondary);
+	--color-success: var(--ui-success);
+	--color-info: var(--ui-info);
+	--color-warning: var(--ui-warning);
+	--color-error: var(--ui-error);
+  --radius-xs: calc(var(--ui-radius) * 0.5);
+  --radius-sm: var(--ui-radius);
+  --radius-md: calc(var(--ui-radius) * 1.5);
+  --radius-lg: calc(var(--ui-radius) * 2);
+  --radius-xl: calc(var(--ui-radius) * 3);
+  --radius-2xl: calc(var(--ui-radius) * 4);
+  --radius-3xl: calc(var(--ui-radius) * 6);
+  --text-color-dimmed: var(--ui-text-dimmed);
+  --text-color-muted: var(--ui-text-muted);
+  --text-color-toned: var(--ui-text-toned);
+  --text-color-default: var(--ui-text);
+  --text-color-highlighted: var(--ui-text-highlighted);
+  --text-color-inverted: var(--ui-text-inverted);
+  --background-color-default: var(--ui-bg);
+  --background-color-muted: var(--ui-bg-muted);
+  --background-color-elevated: var(--ui-bg-elevated);
+  --background-color-accented: var(--ui-bg-accented);
+  --background-color-inverted: var(--ui-bg-inverted);
+  --background-color-border: var(--ui-border);
+  --border-color-default: var(--ui-border);
+  --border-color-muted: var(--ui-border-muted);
+  --border-color-accented: var(--ui-border-accented);
+  --border-color-inverted: var(--ui-border-inverted);
+  --border-color-bg: var(--ui-bg);
+  --ring-color-default: var(--ui-border);
+  --ring-color-muted: var(--ui-border-muted);
+  --ring-color-accented: var(--ui-border-accented);
+  --ring-color-inverted: var(--ui-border-inverted);
+  --ring-color-bg: var(--ui-bg);
+  --ring-offset-color-default: var(--ui-border);
+  --ring-offset-color-muted: var(--ui-border-muted);
+  --ring-offset-color-accented: var(--ui-border-accented);
+  --ring-offset-color-inverted: var(--ui-border-inverted);
+  --ring-offset-color-bg: var(--ui-bg);
+  --divide-color-default: var(--ui-border);
+  --divide-color-muted: var(--ui-border-muted);
+  --divide-color-accented: var(--ui-border-accented);
+  --divide-color-inverted: var(--ui-border-inverted);
+  --divide-color-bg: var(--ui-bg);
+  --outline-color-default: var(--ui-border);
+  --outline-color-inverted: var(--ui-border-inverted);
+  --stroke-default: var(--ui-border);
+  --stroke-inverted: var(--ui-border-inverted);
+  --fill-default: var(--ui-border);
+  --fill-inverted: var(--ui-border-inverted);
+}

package/app/app.config.ts

@@ -0,0 +1,7 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      neutral: 'gray',
+    },
+  },
+})

package/app/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <UCustomApp />
+</template>

package/app/assets/css/base.css

@@ -0,0 +1,28 @@
+@import 'tailwindcss';
+@import '@nuxt/ui';
+
+@layer base {
+  html,
+  body,
+  #__nuxt {
+    height: 100%;
+    isolation: isolate;
+  }
+
+  body {
+    background: var(--ui-color-neutral-50);
+  }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+
+  label:has(input[type='checkbox']:not(:disabled)) {
+    cursor: pointer;
+  }
+
+  fieldset > label {
+    cursor: pointer;
+  }
+}

package/app/components/Var.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts" generic="T">
+defineProps<{
+  value: T
+}>()
+
+defineSlots<{
+  default: (props: { value: T }) => any
+}>()
+</script>
+
+<template>
+  <slot v-bind="{ value }" />
+</template>

package/app/components/layout/LayoutDashboard.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { ButtonProps, NavigationMenuItem } from '@nuxt/ui'
+
+defineProps<{
+  sidebar?: {
+    logo?: {
+      src?: string
+      iconSrc?: string
+    }
+    items?: NavigationMenuItem[]
+    bottomItems?: NavigationMenuItem[]
+    userMenu?: {
+      name: string
+      avatarSrc?: string
+    }
+  }
+  navbar?: {
+    title?: string
+  }
+  toolbar?: {
+    items?: NavigationMenuItem[]
+    itemsEnd?: NavigationMenuItem[]
+  }
+  container?: boolean
+}>()
+
+defineSlots<{
+  default: any
+}>()
+
+const config = useRuntimeConfig()
+</script>
+
+<template>
+  <UDashboardGroup storage="local" :storage-key="`${config.public.projectId}-dashboard`" unit="rem">
+    <UDashboardSidebar v-if="sidebar" collapsible resizable class="bg-white" mode="drawer">
+      <template v-if="sidebar.logo?.src || sidebar.logo?.iconSrc" #header="{ collapsed }">
+        <img
+          v-if="!collapsed && sidebar.logo.src"
+          class="h-5 w-auto shrink-0"
+          :src="sidebar.logo.src"
+        />
+        <img
+          v-if="(collapsed || !sidebar.logo.src) && sidebar.logo.iconSrc"
+          class="size-5"
+          :src="sidebar.logo.iconSrc"
+          :class="{
+            'mx-auto': collapsed,
+          }"
+        />
+      </template>
+      <template #default="{ collapsed }">
+        <UNavigationMenu
+          v-if="sidebar.items"
+          :collapsed="collapsed"
+          :items="sidebar.items"
+          orientation="vertical"
+        />
+
+        <UNavigationMenu
+          v-if="sidebar.bottomItems"
+          :collapsed="collapsed"
+          :items="sidebar.bottomItems"
+          orientation="vertical"
+          class="mt-auto"
+        />
+      </template>
+      <template v-if="sidebar.userMenu" #footer="{ collapsed }">
+        <UButton
+          :label="collapsed ? undefined : sidebar.userMenu.name"
+          :avatar="{
+            src: sidebar.userMenu.avatarSrc,
+            alt: sidebar.userMenu.name,
+          }"
+          color="neutral"
+          variant="ghost"
+          class="w-full"
+          :block="collapsed"
+        />
+      </template>
+    </UDashboardSidebar>
+    <UDashboardPanel>
+      <template #header>
+        <UDashboardNavbar v-if="navbar" class="bg-white" :title="navbar.title">
+          <template #leading>
+            <UDashboardSidebarCollapse />
+          </template>
+        </UDashboardNavbar>
+        <UDashboardToolbar v-if="toolbar" class="bg-white">
+          <UNavigationMenu :items="toolbar.items" highlight />
+          <UNavigationMenu :items="toolbar.itemsEnd" class="ml-auto" highlight />
+        </UDashboardToolbar>
+      </template>
+      <template #body>
+        <UContainer v-if="container">
+          <slot />
+        </UContainer>
+        <slot v-else />
+      </template>
+    </UDashboardPanel>
+  </UDashboardGroup>
+</template>

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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,37 @@
+<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

@@ -0,0 +1,23 @@
+<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/UCustomApp.vue

@@ -0,0 +1,20 @@
+<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">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>

package/app/components/u/UField.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts" generic="T">
+import type { FormField } from '@falcondev-oss/form-core'
+import type { FormFieldProps } from '@nuxt/ui'
+import type { ModelModifiers } from '@nuxt/ui/runtime/types/input.js'
+import { useForwardProps } from 'reka-ui'
+
+type FieldSlotProps<T> = {
+  'modelValue': T
+  'onUpdate:modelValue': (value: T) => void
+  'onBlur': () => void
+  'disabled': boolean
+  'loading': boolean
+  'modelModifiers'?: Pick<ModelModifiers, 'nullable'>
+}
+
+const props = defineProps<
+  FormFieldProps & {
+    field: FormField<T>
+  }
+>()
+defineSlots<{
+  default: (props: Omit<FieldSlotProps<T>, 'modelModifiers'>) => any
+}>()
+
+const forwardedProps = useForwardProps(props)
+
+const formFieldProps = computed(() => {
+  const { field, ...rest } = forwardedProps.value
+
+  return rest
+})
+
+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>,
+)
+</script>
+
+<template>
+  <UFormField
+    v-bind="formFieldProps"
+    :error="forwardedProps.field.errors && forwardedProps.field.errors.join('\n')"
+  >
+    <slot v-bind="slotProps" />
+  </UFormField>
+</template>

package/app/components/u/UImageWithFallback.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useImage } from '@vueuse/core'
+
+const props = defineProps<{
+  src?: string
+  alt?: string
+  fallbackSrc?: string
+}>()
+
+defineSlots<{
+  default: () => any
+}>()
+
+const { error, isReady } = props.src
+  ? useImage(() => ({
+      src: props.src ?? '',
+    }))
+  : {
+      isReady: false,
+      error: true,
+    }
+</script>
+
+<template>
+  <img v-if="isReady" :src="src" :alt="alt" />
+  <USkeleton v-else-if="!error" />
+  <div v-else>
+    <slot name="default">
+      <!-- eslint-disable-next-line vue/no-duplicate-attr-inheritance -->
+      <img v-if="fallbackSrc" :src="fallbackSrc" v-bind="$attrs" />
+      <!-- eslint-disable-next-line vue/no-duplicate-attr-inheritance -->
+      <USkeleton v-else v-bind="$attrs" />
+    </slot>
+  </div>
+</template>

package/app/components/u/UInputDatePicker.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { DateValue } from '@internationalized/date'
+
+const inputDate = useTemplateRef('inputDate')
+
+const model = defineModel<DateValue | null>({ required: true })
+const open = ref(false)
+</script>
+
+<template>
+  <UInputDate ref="inputDate" v-model="model">
+    <template #trailing>
+      <UPopover v-model:open="open" :reference="inputDate?.inputsRef[3]?.$el">
+        <UButton
+          color="neutral"
+          variant="link"
+          size="sm"
+          icon="i-lucide-calendar"
+          aria-label="Datum auswählen"
+          class="px-0"
+        />
+
+        <template #content>
+          <UCalendar
+            :model-value="model ?? undefined"
+            :multiple="false"
+            :range="false"
+            class="p-2"
+            @update:model-value="
+              (val) => {
+                model = val ?? null
+                open = false
+              }
+            "
+          />
+        </template>
+      </UPopover>
+    </template>
+  </UInputDate>
+</template>