@falcondev-oss/nuxt-layers-base 0.38.1 → 0.39.0

package/app/assets/css/utilities.css

@@ -1,3 +1,7 @@
 @utility z-full {
   z-index: 2147483647;
 }
+
+@utility no-scrollbar {
+  @apply [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
+}

package/app/components/modals/ConfirmModal.vue

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

@@ -0,0 +1,109 @@
+<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/u/USwitchCard.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  title: string
+  icon?: string
+  loading?: boolean
+  alwaysExpanded?: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: [value: boolean, controller: AbortController]
+}>()
+
+defineSlots<{
+  default: () => any
+}>()
+
+const model = defineModel<boolean>({ required: true })
+
+const expanded = computed(() => props.alwaysExpanded || model.value)
+
+function onToggle(value: boolean) {
+  const controller = new AbortController()
+  emit('toggle', value, controller)
+  if (controller.signal.aborted) return
+
+  model.value = value
+}
+</script>
+
+<template>
+  <UCard
+    class="m-px"
+    variant="subtle"
+    :ui="{
+      header: `text-sm font-semibold py-2 px-3! ${expanded ? '' : 'border-b-0'}`,
+      body: `p-3! ${expanded ? '' : 'hidden'}`,
+    }"
+  >
+    <template #header>
+      <div class="flex items-center justify-between gap-8">
+        <span class="flex items-center gap-2">
+          <UIcon v-if="icon" :name="icon" class="text-muted size-5" />
+          {{ title }}
+        </span>
+        <USwitch :model-value="model" :loading @update:model-value="(value) => onToggle(value)" />
+      </div>
+    </template>
+
+    <slot />
+  </UCard>
+</template>

package/app/components/util/SlotRef.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+
+defineProps<{
+  slotRef?: ComponentPublicInstance
+}>()
+
+defineSlots<{
+  default: () => any
+}>()
+</script>
+
+<template>
+  <component :is="slotRef.$slots.default" v-if="slotRef" />
+  <!-- eslint-disable-next-line vue/no-lone-template -->
+  <template v-else />
+</template>

package/app/components/util/TemplateText.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { templateParts } from '~/utils/display'
+
+defineProps<{
+  text: ReturnType<typeof templateParts>
+}>()
+</script>
+
+<template>
+  <p>
+    <span v-for="(string, index) in text.strings" :key="index">
+      <span>{{ string }}</span>
+      <strong v-if="text.values[index]" class="font-semibold">
+        <UBadge variant="soft" color="neutral" size="lg" class="h-6! p-1! font-semibold">
+          {{ text.values[index] }}
+        </UBadge>
+      </strong>
+    </span>
+  </p>
+</template>

package/app/composables/confirm.ts

@@ -0,0 +1,22 @@
+import type { RadioGroupItem } from '@nuxt/ui'
+import type { ConfirmModalProps } from '~/components/modals/ConfirmModal.vue'
+import { LazyConfirmModal } from '#components'
+
+export type ConfirmModalSuccess<O extends RadioGroupItem[]> = 0 extends O['length']
+  ? true
+  : {
+      [K in keyof O]: O[K] extends { value: infer V } ? V : never
+    }[number]
+
+export type ConfirmModalResult<O extends RadioGroupItem[]> = false | ConfirmModalSuccess<O>
+
+export const useConfirm = createGlobalState(() => {
+  const overlay = useOverlay()
+
+  return async <const O extends RadioGroupItem[]>(props: ConfirmModalProps<O>) =>
+    overlay
+      .create(LazyConfirmModal, {
+        destroyOnClose: true,
+      })
+      .open(props).result as Promise<ConfirmModalResult<O>>
+})

package/app/composables/usePreventPageLeave.ts

@@ -1,5 +1,5 @@
 import { onBeforeRouteLeave } from '#app'
-import { useConfirm } from './useConfirm'
+import { useConfirm } from './confirm'
 
 export function usePreventPageLeave(
   preventPageLeave: MaybeRefOrGetter<boolean> = true,
@@ -10,6 +10,7 @@ export function usePreventPageLeave(
 ) {
   useEventListener('beforeunload', (event) => {
     if (!toValue(preventPageLeave)) return
+    // eslint-disable-next-line ts/no-unsafe-member-access
     event.returnValue = opts?.leaveDescription
     return opts?.leaveDescription
   })
@@ -19,11 +20,11 @@ export function usePreventPageLeave(
   onBeforeRouteLeave(async (_, __, next) => {
     if (!toValue(preventPageLeave)) return next()
 
-    const allowLeave = await confirm.confirmDestructive({
+    const allowLeave = await confirm({
       title: opts?.leaveTitle || 'Ungespeicherte Änderungen',
-      description:
+      text:
         opts?.leaveDescription || 'Es gibt ungespeicherte Änderungen. Seite trotzdem verlassen?',
-      submitLabel: 'Verlassen',
+      confirmLabel: 'Verlassen',
     })
     if (allowLeave) return next()
   })

package/app/index.d.ts

@@ -0,0 +1,7 @@
+declare module 'vue' {
+  interface ComponentCustomProps {
+    'aria-label'?: string
+  }
+}
+
+export {}

package/app/utils/display.ts

@@ -1,6 +1,20 @@
-export function formatEurosAmount(amount: number) {
+export function formatEuros(amount: number) {
   return new Intl.NumberFormat('de-DE', {
     style: 'currency',
     currency: 'EUR',
   }).format(amount)
 }
+
+export function pluralize(count: number, singular: string, plural: string) {
+  return count === 1 ? singular : plural
+}
+
+export function templateParts(
+  strings: TemplateStringsArray,
+  ...values: unknown[]
+): { strings: string[]; values: string[] } {
+  return {
+    strings: [...strings],
+    values: values.map(String),
+  }
+}

package/nuxt.config.ts

@@ -43,6 +43,13 @@ export default defineNuxtConfig({
       strict: true,
     },
   },
+  components: [
+    {
+      // layer configs resolve `~` against the consuming project, so use absolute paths
+      path: path.join(currentDir, './app/components'),
+      pathPrefix: false,
+    },
+  ],
   imports: {
     dirs: [
       // layer configs resolve `~` against the consuming project, so use absolute paths

package/package.json

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

package/app/composables/useConfirm.ts

@@ -1,16 +0,0 @@
-import { OverlayModalConfirm } from '#components'
-
-export const useConfirm = createGlobalState(() => {
-  const overlay = useOverlay()
-
-  return {
-    confirmDestructive: async (props: {
-      description: string
-      submitLabel: string
-      title: string
-    }) => {
-      const modal = overlay.create(OverlayModalConfirm)
-      return modal.open(props).result as Promise<boolean>
-    },
-  }
-})