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

package/app/components/u/UField.vue

@@ -1,191 +0,0 @@
-<script setup lang="ts" generic="T">
-import type { FormField } from '@falcondev-oss/form-core'
-import type { FormFieldProps, FormFieldSlots } from '@nuxt/ui'
-import { createReusableTemplate } from '@vueuse/core'
-import { useForwardProps } from 'reka-ui'
-import * as R from 'remeda'
-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
-}
-
-const props = defineProps<
-  FormFieldProps & {
-    field: FormField<T>
-    errorInline?: boolean
-    errorPreferPlaceholder?: boolean
-  }
->()
-
-const slots = defineSlots<
-  {
-    default: (slot: {
-      bind: InputProps<T>
-      model: WritableComputedRef<T>
-      field: FormField<T>
-    }) => any
-  } & Omit<FormFieldSlots, 'default'>
->()
-
-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)
-  },
-})
-
-const model_ = { model }
-
-const [DefineErrorTemplate, ErrorTemplate] = createReusableTemplate({
-  props: {
-    errors: Array as PropType<string[]>,
-  },
-})
-</script>
-
-<template>
-  <UFormField
-    v-bind="formFieldProps"
-    :ui="{
-      ...formFieldProps.ui,
-      hint: mergeSlotClass(formFieldProps.ui?.hint, isOverMaxLength ? 'text-error' : ''),
-      error: mergeSlotClass(formFieldProps.ui?.error, 'mt-1!'),
-    }"
-    :error="!!field.errors"
-    :class="props.class"
-  >
-    <DefineErrorTemplate v-slot="{ errors }">
-      <p v-if="errors.length === 1">
-        {{ errors.join('\n') }}
-      </p>
-
-      <ul v-else>
-        <li v-for="(error, index) in errors" :key="error + index" class="list-inside">
-          {{ error }}
-        </li>
-      </ul>
-    </DefineErrorTemplate>
-
-    <template
-      v-if="
-        field.errors &&
-        errorInline &&
-        (errorPreferPlaceholder ? String(field.value).length > 0 : true)
-      "
-      #error
-    >
-      <ErrorTemplate :errors="field.errors" />
-
-      <template v-if="typeof error === 'string'">
-        {{ error }}
-      </template>
-    </template>
-
-    <template v-else #hint="{ hint }">
-      <span class="flex items-center gap-1.5">
-        <UPopover
-          v-if="!!field.errors && (errorPreferPlaceholder ? String(field.value).length > 0 : true)"
-          mode="hover"
-          :open-delay="0"
-          :ui="{
-            content: 'bg-error-50 ring-error-200! rounded py-1 px-2',
-          }"
-        >
-          <UIcon name="lucide:circle-alert" class="text-error" />
-          <template #content>
-            <div class="max-w-sm text-xs text-(--ui-color-neutral-800)">
-              <ErrorTemplate :errors="field.errors" />
-            </div>
-          </template>
-        </UPopover>
-
-        {{ hint }}
-      </span>
-    </template>
-
-    <template v-if="field.schema.examples" #help>
-      <template v-if="Array.isArray(field.schema.examples)">
-        <ul>
-          <li v-for="(example, index) in field.schema.examples" :key="index">
-            {{ example }}
-          </li>
-        </ul>
-      </template>
-      <p v-else>
-        {{ field.schema.examples }}
-      </p>
-    </template>
-
-    <slot v-bind="{ bind, model: model_.model, field: forwardedProps.field }">
-      <DevOnly>
-        <p class="font-black text-red-500">UField missing slot</p>
-      </DevOnly>
-    </slot>
-
-    <template v-for="(_, name) in R.omit(slots, ['default'])" #[name]="slotData">
-      <!-- @vue-ignore -->
-      <slot :name="name" v-bind="slotData || {}" />
-    </template>
-  </UFormField>
-</template>
-
-<style scoped>
-:deep([aria-invalid='true']) {
-  &::placeholder {
-    color: var(--ui-color-error-500);
-    opacity: 0.5;
-  }
-}
-</style>

package/app/components/u/UForm.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import type { FormHandle } from '@falcondev-oss/form-core'
-import type { ButtonProps } from '@nuxt/ui'
-import type { Toast } from '#ui/composables'
-
-const props = withDefaults(
-  defineProps<{
-    submitLabel?: string
-    submitButtonProps?: ButtonProps
-    actions?: ButtonProps[]
-    actionsTeleportTo?: string
-    form: FormHandle
-    disableSubmitIfUnchanged?: boolean
-    successToast?: Partial<Toast>
-    preventPageLeave?: boolean
-  }>(),
-  {
-    disableSubmitIfUnchanged: true,
-    preventPageLeave: true,
-  },
-)
-
-defineSlots<{
-  default: any
-}>()
-
-usePreventPageLeave(() => props.preventPageLeave && props.form.isChanged && !props.form.isLoading)
-
-const toast = useToast()
-let unhook: (() => void) | null = null
-watch(
-  () => props.form,
-  (form) => {
-    unhook?.()
-    unhook = form.hooks.addHooks({
-      afterSubmit(result) {
-        if (!result.success || !props.successToast) return
-
-        toast.add({
-          preset: 'success',
-          ...props.successToast,
-        })
-      },
-    })
-  },
-  { immediate: true },
-)
-
-const actionsWithSubmit = computed(() => {
-  const submit = {
-    ...props.submitButtonProps,
-    variant: 'solid',
-    label: props.submitButtonProps?.label ?? props.submitLabel ?? 'Submit',
-    disabled: props.disableSubmitIfUnchanged
-      ? !props.form.isChanged || props.form.isLoading
-      : props.form.isLoading,
-    loading: props.form.isLoading,
-    onClick: async () => {
-      await props.form.submit()
-    },
-  } satisfies ButtonProps
-  if (!props.actions) return [submit]
-
-  return [...props.actions, submit]
-})
-
-const rootErrors = computed(() => props.form.errors?.filter((error) => error.path?.length === 0))
-</script>
-
-<template>
-  <form class="w-full" @submit.prevent="() => form.submit()">
-    <slot />
-    <div
-      v-show="rootErrors?.length || !actionsTeleportTo"
-      class="col-span-full flex w-full flex-col gap-4"
-    >
-      <ul v-if="rootErrors?.length" class="text-error text-sm">
-        <li v-for="error of rootErrors" :key="`${error.path}:${error.message}`">
-          {{ error.path }}:{{ error.message }}
-        </li>
-      </ul>
-
-      <hr class="h-px w-full text-(--ui-border-muted)" />
-
-      <div v-show="!actionsTeleportTo" class="flex items-center justify-end gap-4">
-        <Teleport defer :disabled="!actionsTeleportTo" :to="actionsTeleportTo">
-          <UActions
-            :defaults="{ variant: 'subtle' }"
-            :actions="actionsWithSubmit"
-            class="contents!"
-          />
-        </Teleport>
-      </div>
-    </div>
-  </form>
-</template>

package/app/components/u/UImageWithFallback.vue

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

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import type { DateValue } from '@internationalized/date'
-import type { CalendarProps, InputDateProps } from '@nuxt/ui'
-
-defineProps<{
-  input?: InputDateProps
-  calendar?: CalendarProps
-  disabled?: boolean
-  loading?: boolean
-  placeholder?: string
-}>()
-
-const emit = defineEmits<{
-  blur: []
-}>()
-
-const inputDate = useTemplateRef('inputDate')
-
-const model = defineModel<DateValue | null>({ required: true })
-const open = ref(false)
-
-watch(open, () => {
-  if (!open.value) emit('blur')
-})
-</script>
-
-<template>
-  <UInputDate
-    ref="inputDate"
-    v-bind="input"
-    :disabled
-    :loading
-    :range="false"
-    :model-value="model"
-    @blur="() => emit('blur')"
-    @update:model-value="
-      (val) => {
-        model = val ?? null
-      }
-    "
-  >
-    <template #trailing>
-      <UPopover v-model:open="open" :reference="inputDate?.inputsRef[3]?.$el">
-        <UButton color="neutral" variant="link" size="sm" icon="i-lucide-calendar" class="px-0" />
-
-        <template #content>
-          <div class="p-2">
-            <UCalendar
-              v-bind="calendar"
-              :model-value="model ?? undefined"
-              :multiple="false"
-              :range="false"
-              @update:model-value="
-                (val) => {
-                  model = val ?? null
-                  open = false
-                }
-              "
-            />
-            <div v-if="model" class="flex justify-end">
-              <UButton
-                variant="ghost"
-                icon="tabler:trash"
-                color="error"
-                label="Löschen"
-                size="sm"
-                @click="
-                  () => {
-                    model = null
-                  }
-                "
-              />
-            </div>
-          </div>
-        </template>
-      </UPopover>
-    </template>
-  </UInputDate>
-</template>

package/app/components/u/UInputDateRangePicker.vue

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import type { CalendarDate, DateValue } from '@internationalized/date'
-import { toCalendarDate } from '@internationalized/date'
-
-const inputDate = useTemplateRef('inputDate')
-
-const model = defineModel<{
-  start: CalendarDate
-  end: CalendarDate
-} | null>({
-  required: true,
-})
-
-const localModel = shallowRef({
-  // eslint-disable-next-line vue/no-ref-object-reactivity-loss
-  start: model.value?.start,
-  // eslint-disable-next-line vue/no-ref-object-reactivity-loss
-  end: model.value?.end,
-} as
-  | {
-      start: DateValue | undefined
-      end: DateValue | undefined
-    }
-  | undefined
-  | null)
-
-const open = ref(false)
-
-let syncingModelValue = false
-watch(
-  localModel,
-  (newValue) => {
-    // prevent infinite loop
-    if (syncingModelValue) return
-
-    if (newValue?.start && newValue.end) {
-      model.value = {
-        start: toCalendarDate(newValue.start),
-        end: toCalendarDate(newValue.end),
-      }
-      open.value = false
-    } else if (!newValue?.start && !newValue?.end) {
-      model.value = null
-      open.value = false
-    }
-  },
-  {
-    flush: 'sync',
-  },
-)
-
-watch(model, (newValue) => {
-  syncingModelValue = true
-  if (newValue) {
-    localModel.value = {
-      start: newValue.start,
-      end: newValue.end,
-    }
-  } else {
-    localModel.value = {
-      start: undefined,
-      end: undefined,
-    }
-  }
-  syncingModelValue = false
-})
-</script>
-
-<template>
-  <UInputDate ref="inputDate" v-model="localModel" range>
-    <template #trailing>
-      <UPopover v-model:open="open" :reference="inputDate?.inputsRef[0]?.$el">
-        <UButton color="neutral" variant="link" size="sm" icon="i-lucide-calendar" class="px-0" />
-
-        <template #content>
-          <div class="p-2">
-            <UCalendar v-model="localModel" :number-of-months="2" range />
-            <div v-if="model" class="flex justify-end">
-              <UButton
-                variant="ghost"
-                icon="tabler:trash"
-                color="error"
-                label="Löschen"
-                size="sm"
-                @click="
-                  () => {
-                    localModel = {
-                      start: undefined,
-                      end: undefined,
-                    }
-                  }
-                "
-              />
-            </div>
-          </div>
-        </template>
-      </UPopover>
-    </template>
-  </UInputDate>
-</template>

package/app/components/u/UInputDurationMinutes.vue

@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import type { InputEmits, InputProps } from '@nuxt/ui'
-import type { MaskOptions } from 'maska'
-import { regex } from 'arkregex'
-import { vMaska } from 'maska/vue'
-import { useForwardPropsEmits } from 'reka-ui'
-
-type Props = Omit<InputProps<string>, 'modelValue' | 'defaultValue' | 'modelModifiers'> & {
-  showZeroMinutes?: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Omit<InputEmits<string>, 'update:modelValue'>>()
-const forwardedProps = useForwardPropsEmits(props as Props, emit)
-
-const model = defineModel<number | null>({
-  required: true,
-})
-
-const parser = regex('^-?(?<hours>\\d{1,}):?(?<minutes>\\d{1,2})?$')
-const duration = computed({
-  get: () => {
-    if (model.value === null) return null
-
-    const absoluteMinutes = Math.abs(model.value)
-
-    const hours = Math.floor(absoluteMinutes / 60)
-    const minutes = absoluteMinutes % 60
-    const sign = model.value < 0 ? '-' : ''
-
-    // don't always add :00 if minutes is 0
-    if (minutes > 0 || props.showZeroMinutes)
-      return `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
-
-    return `${sign}${hours.toString()}`
-  },
-  set: (val) => {
-    if (!val) {
-      model.value = null
-      return
-    }
-
-    const parsed = parser.exec(val)
-    if (!parsed) {
-      model.value = null
-      return
-    }
-
-    const isNegative = val.startsWith('-')
-
-    const hours = Number.parseInt(parsed.groups.hours) * 60
-    const minutes = parsed.groups.minutes ? Number.parseInt(parsed.groups.minutes) : 0
-
-    model.value = isNegative ? (hours + minutes) * -1 : hours + minutes
-  },
-})
-
-const maskOptions: MaskOptions = {
-  // S: sign, H: hours (unlimited), 5: tens digit of minutes, D: digit of minutes
-  mask: 'SH:5D',
-  tokens: {
-    'S': { pattern: /[-+]/, optional: true },
-    'D': { pattern: /\d/ },
-    'H': { pattern: /\d/, multiple: true },
-    '5': {
-      pattern: /[0-5]/,
-      transform(char) {
-        // clamp char to max 5, otherwise maska would just block input if user tries to input 6-9
-        const num = Number.parseInt(char)
-        if (Number.isNaN(num)) return char
-        return num > 5 ? '5' : char
-      },
-    },
-  },
-}
-</script>
-
-<template>
-  <UInput
-    v-bind="forwardedProps"
-    v-model="duration"
-    v-maska="maskOptions"
-    :model-modifiers="{
-      nullable: true,
-      lazy: true,
-    }"
-    placeholder="HH:mm"
-    trailing-icon="lucide:timer"
-  />
-</template>