diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue index 9ea237a93d..98098e4511 100644 --- a/packages/nc-gui/components/cell/attachment/Carousel.vue +++ b/packages/nc-gui/components/cell/attachment/Carousel.vue @@ -13,7 +13,7 @@ const { getPossibleAttachmentSrc } = useAttachment() useEventListener(container, 'click', (e) => { const target = e.target as HTMLElement - if (!target.closest('.keep-open') && !target.closest('img')) { + if (!target.closest('.keep-open') && (!target.closest('img') || !target.closest('video'))) { selectedFile.value = false } }) @@ -82,23 +82,32 @@ watchOnce(emblaMainApi, async (emblaMainApi) => { - + - - - +
+ + + +
+ +
{{ item.title }}
+
+
@@ -129,6 +138,9 @@ watchOnce(emblaMainApi, async (emblaMainApi) => { > +
+ +
@@ -140,7 +152,17 @@ watchOnce(emblaMainApi, async (emblaMainApi) => { diff --git a/packages/nc-gui/components/cell/attachment/Image.vue b/packages/nc-gui/components/cell/attachment/Image.vue index fa34210b87..a109bf8803 100644 --- a/packages/nc-gui/components/cell/attachment/Image.vue +++ b/packages/nc-gui/components/cell/attachment/Image.vue @@ -20,6 +20,7 @@ const onError = () => index.value++ }" class="m-auto h-full max-h-full w-auto object-cover nc-attachment-image" :src="props.srcs[index]" + loading="lazy" :alt="props?.alt || ''" placeholder quality="75" diff --git a/packages/nc-gui/components/cell/attachment/Video.vue b/packages/nc-gui/components/cell/attachment/Video.vue index 28c0a5dde1..a7a7b831a5 100644 --- a/packages/nc-gui/components/cell/attachment/Video.vue +++ b/packages/nc-gui/components/cell/attachment/Video.vue @@ -1,23 +1,117 @@ diff --git a/packages/nc-gui/utils/objectUtils.ts b/packages/nc-gui/utils/objectUtils.ts new file mode 100644 index 0000000000..6eb34de220 --- /dev/null +++ b/packages/nc-gui/utils/objectUtils.ts @@ -0,0 +1,26 @@ +type NonUndefined = T extends undefined ? never : T +type NonNull = T extends null ? never : T +type NonNullableObject = { + [K in keyof T]: NonUndefined> +} + +type Prettify = { + [K in keyof T]: T[K] +} & {} + +export const stripUndefinedOrNull = (obj: T): Prettify> => { + const strip = (input: unknown): unknown => { + return Array.isArray(input) + ? input.map(strip) + : input !== null && typeof input === 'object' + ? Object.entries(input) + .filter(([, value]) => value !== undefined && value !== null) + .reduce((acc, [key, value]) => { + acc[key as keyof typeof acc] = strip(value) + return acc + }, {} as Record) + : input + } + + return strip(obj) as Prettify> +}