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

package/app/components/u/UInputFile.vue

@@ -1,127 +0,0 @@
-<script setup lang="ts" generic="Multiple extends boolean = false">
-import type { FileUploadEmits, FileUploadProps } from '@nuxt/ui'
-import { useForwardPropsEmits } from 'reka-ui'
-import { omit } from 'remeda'
-
-const props = withDefaults(
-  defineProps<
-    FileUploadProps<Multiple> & {
-      /**
-       * Set to `false` to disable compression
-       */
-      compression?:
-        | boolean
-        | {
-            /**
-             * @default 1920
-             */
-            maxDimension?: number
-            /**
-             * @default 0.85
-             */
-            quality?: number
-            /**
-             * @default 'image/webp'
-             */
-            outputType?: string
-          }
-    }
-  >(),
-  { compression: true },
-)
-const emit = defineEmits<
-  FileUploadEmits & {
-    compressed: [
-      event: {
-        original: File
-        compressed: File
-        savedBytes: number
-        savedPercentage: number
-      },
-    ]
-  }
->()
-const forwarded = useForwardPropsEmits(props, emit)
-
-type Files = Multiple extends true ? File[] : File
-const model = defineModel<Files | null>()
-
-const compressedFiles = new WeakMap<File, File>()
-async function forwardFiles(files: File | File[] | null | undefined) {
-  if (!files) {
-    model.value = files
-    return
-  }
-
-  const filesArray = Array.isArray(files) ? files : [files]
-  const compressed = await Promise.all(
-    filesArray.map(async (file) => {
-      if (!file.type.startsWith('image/')) return file
-      return await compressImage(file)
-    }),
-  )
-
-  model.value = (props.multiple ? compressed : compressed[0]!) as Files
-}
-
-async function compressImage(file: File) {
-  if (props.compression === false) return file
-  if (compressedFiles.has(file)) return compressedFiles.get(file)!
-
-  const maxDimension =
-    typeof props.compression === 'object' ? (props.compression?.maxDimension ?? 1920) : 1920
-  const quality =
-    typeof props.compression === 'object' ? (props.compression?.quality ?? 0.85) : 0.85
-  const outputType =
-    typeof props.compression === 'object'
-      ? (props.compression?.outputType ?? 'image/webp')
-      : 'image/webp'
-
-  const img = new Image()
-  await new Promise((resolve, reject) => {
-    img.addEventListener('load', resolve)
-    img.addEventListener('error', reject)
-    img.src = URL.createObjectURL(file)
-  })
-
-  const scale = Math.min(1, maxDimension / Math.max(img.width, img.height))
-  const canvas = document.createElement('canvas')
-  canvas.width = img.width * scale
-  canvas.height = img.height * scale
-  const ctx = canvas.getContext('2d')!
-  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
-  URL.revokeObjectURL(img.src)
-
-  return new Promise<File>((resolve, reject) => {
-    canvas.toBlob(
-      (blob) => {
-        if (!blob) return reject(new Error('Canvas is empty'))
-
-        const name = file.name.replace(/\.\w+$/, `.${outputType.split('/')[1]}`)
-        const compressedFile = new File([blob], name, { type: outputType })
-
-        compressedFiles.set(file, compressedFile)
-        compressedFiles.set(compressedFile, compressedFile) // required since we set model value to the compressed file
-        resolve(compressedFile)
-
-        emit('compressed', {
-          original: file,
-          compressed: compressedFile,
-          savedBytes: file.size - compressedFile.size,
-          savedPercentage: ((file.size - compressedFile.size) / file.size) * 100,
-        })
-      },
-      outputType,
-      quality,
-    )
-    canvas.remove()
-  })
-}
-</script>
-
-<template>
-  <UFileUpload
-    v-bind="omit(forwarded, ['compression'])"
-    @update:model-value="(files) => forwardFiles(files)"
-  />
-</template>

package/app/components/u/URibbonCard.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import type { CardProps, CardSlots } from '@nuxt/ui'
-import { useForwardProps } from 'reka-ui'
-
-const props = defineProps<CardProps>()
-const slots = defineSlots<
-  CardSlots & {
-    /** Ribbon strip above the body — fill it with `URibbonSection`s. */
-    ribbon?: () => any
-  }
->()
-
-const forwarded = useForwardProps(props)
-
-const cardSlots = computed(
-  () => Object.keys(slots).filter((name) => name !== 'ribbon') as (keyof CardSlots)[],
-)
-</script>
-
-<template>
-  <div class="flex flex-col">
-    <!-- the ribbon's lower edge runs behind the card, so the card keeps its own rounded top -->
-    <div
-      v-if="slots.ribbon"
-      class="divide-default ring-default bg-elevated -mb-2 flex items-stretch divide-x overflow-x-auto rounded-t-lg pb-2 shadow-[inset_0_2px_3px_-2px_rgb(0_0_0/0.06),inset_2px_0_3px_-2px_rgb(0_0_0/0.06),inset_-2px_0_3px_-2px_rgb(0_0_0/0.06)] ring"
-    >
-      <slot name="ribbon" />
-    </div>
-
-    <UCard
-      v-bind="forwarded"
-      :ui="{
-        body: 'p-0!',
-        ...forwarded.ui,
-      }"
-      class="ring-accented relative shadow-[0_-2px_3px_-1px_rgb(0_0_0/0.08)]"
-    >
-      <template v-for="name of cardSlots" #[name]>
-        <slot :name />
-      </template>
-    </UCard>
-  </div>
-</template>

package/app/components/u/URibbonSection.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineProps<{
-  title?: string
-  end?: boolean
-}>()
-
-defineSlots<{
-  default: () => any
-}>()
-</script>
-
-<template>
-  <div
-    :data-end="end || undefined"
-    class="flex shrink-0 flex-col gap-1.5 px-3 py-2"
-    :class="end && 'border-default [&:not([data-end]~*)]:ml-auto [&:not([data-end]~*)]:border-l'"
-  >
-    <p v-if="title" class="text-dimmed text-[10px] leading-none">
-      {{ title }}
-    </p>
-    <div class="flex flex-1 flex-wrap items-center gap-1" v-bind="$attrs">
-      <slot />
-    </div>
-  </div>
-</template>

package/app/components/u/USwitchCard.vue

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

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

package/app/components/util/SlotRef.vue

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

@@ -1,24 +0,0 @@
-<script setup lang="ts" generic="T">
-const props = defineProps<{
-  input: T
-  deep?: boolean
-  once?: boolean
-}>()
-
-const output = defineModel<T>('output', { required: true })
-
-watch(
-  () => props.input,
-  () => {
-    output.value = props.input
-  },
-  {
-    immediate: true,
-    deep: props.deep,
-    once: props.once,
-  },
-)
-</script>
-
-<!-- eslint-disable-next-line vue/valid-template-root -->
-<template></template>

package/app/components/util/TemplateText.vue

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

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { NuxtError } from '#app'
-
-const props = defineProps<{
-  error: NuxtError
-}>()
-
-console.error(props.error)
-</script>
-
-<template>
-  <UApp>
-    <UError :error />
-  </UApp>
-</template>