@meeovi/layer-shared 1.0.0

package/app/components/Gallery/Gallery.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="flex-col md:flex-row h-full flex relative scroll-smooth md:gap-4" data-testid="gallery">
+    <div
+      class="after:block after:pt-[100%] flex-1 relative overflow-hidden w-full max-h-[600px]"
+      data-testid="gallery-images"
+    >
+      <SfScrollable
+        class="items-center flex snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none'] w-full h-full"
+        wrapper-class="!absolute top-0 left-0 w-full h-full"
+        buttons-placement="none"
+        :active-index="activeIndex"
+        is-active-index-centered
+        :drag="{ containerWidth: true }"
+        @on-scroll="onScroll"
+      >
+        <div
+          v-for="({ url, alt }, index) in images"
+          :key="`${alt}-${index}-thumbnail`"
+          class="w-full h-full relative snap-center snap-always basis-full shrink-0 grow"
+        >
+          <NuxtImg
+            :alt="alt ?? ''"
+            :aria-hidden="activeIndex !== index"
+            fit="fill"
+            class="object-contain h-full w-full"
+            :quality="80"
+            :src="url"
+            sizes="2xs:100vw, md:700px"
+            draggable="false"
+            :loading="index !== 0 ? 'lazy' : undefined"
+            :fetchpriority="index === 0 ? 'high' : undefined"
+            :preload="index === 0"
+            format="webp"
+            width="600"
+            height="600"
+          />
+        </div>
+      </SfScrollable>
+    </div>
+
+    <div class="md:-order-1 overflow-hidden flex-shrink-0 basis-auto">
+      <SfScrollable
+        ref="thumbsReference"
+        wrapper-class="hidden md:inline-flex"
+        direction="vertical"
+        class="flex-row w-full items-center md:flex-col md:h-full md:px-0 md:scroll-pl-4 snap-y snap-mandatory flex gap-0.5 md:gap-2 overflow-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']"
+        :active-index="activeIndex"
+        :prev-disabled="activeIndex === 0"
+        :next-disabled="activeIndex === images.length - 1"
+      >
+        <template #previousButton>
+          <SfButton
+            variant="secondary"
+            size="sm"
+            square
+            class="absolute !rounded-full bg-white z-10 top-4 rotate-90 disabled:!hidden !ring-neutral-500 !text-neutral-500"
+            :class="{ hidden: firstVisibleThumbnailIntersected }"
+            :aria-label="$t('gallery.prev')"
+          >
+            <template #prefix>
+              <SfIconChevronLeft />
+            </template>
+          </SfButton>
+        </template>
+
+        <button
+          v-for="({ url, alt }, index) in images"
+          :key="`${alt}-${index}-thumbnail`"
+          :ref="(el) => assignReference(el, index)"
+          type="button"
+          :aria-current="activeIndex === index"
+          :aria-label="$t('gallery.thumb', index)"
+          class="w-20 h-[88px] relative shrink-0 pb-1 border-b-4 snap-start cursor-pointer transition-colors flex-grow-0"
+          :class="[activeIndex === index ? 'border-primary-700' : 'border-transparent']"
+          @mouseover="onChangeIndex(index)"
+          @focus="onChangeIndex(index)"
+        >
+          <NuxtImg
+            alt=""
+            class="object-contain"
+            width="80"
+            height="80"
+            :src="url"
+            :quality="80"
+            loading="lazy"
+            format="webp"
+          />
+        </button>
+
+        <template #nextButton>
+          <SfButton
+            variant="secondary"
+            size="sm"
+            square
+            class="absolute !rounded-full bg-white z-10 bottom-4 rotate-90 disabled:!hidden !ring-neutral-500 !text-neutral-500"
+            :class="{ hidden: lastVisibleThumbnailIntersected }"
+            :aria-label="$t('gallery.next')"
+          >
+            <template #prefix>
+              <SfIconChevronRight />
+            </template>
+          </SfButton>
+        </template>
+      </SfScrollable>
+      <div class="flex md:hidden gap-0.5" role="group">
+        <button
+          v-for="({ url }, index) in images"
+          :key="url"
+          type="button"
+          :aria-current="activeIndex === index"
+          :aria-label="$t('gallery.thumb', index + 1)"
+          class="relative shrink-0 pb-1 border-b-4 cursor-pointer transition-colors flex-grow"
+          :class="[activeIndex === index ? 'border-primary-700' : 'border-neutral-200']"
+          @click="onChangeIndex(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue';
+import { clamp, type SfScrollableOnScrollData } from '@storefront-ui/shared';
+import { SfScrollable, SfButton, SfIconChevronLeft, SfIconChevronRight } from '@storefront-ui/vue';
+import type { SfImage } from '@vue-storefront/unified-data-model';
+import { unrefElement, useIntersectionObserver, useTimeoutFn } from '@vueuse/core';
+
+const props = defineProps<{
+  images: SfImage[];
+}>();
+
+const { isPending, start, stop } = useTimeoutFn(() => {}, 50);
+
+const thumbsReference = ref<HTMLElement>();
+const firstThumbReference = ref<HTMLButtonElement>();
+const lastThumbReference = ref<HTMLButtonElement>();
+const firstVisibleThumbnailIntersected = ref(true);
+const lastVisibleThumbnailIntersected = ref(true);
+const activeIndex = ref(0);
+
+const registerThumbsWatch = (
+  singleThumbReference: Ref<HTMLButtonElement | undefined>,
+  thumbnailIntersected: Ref<boolean>,
+) => {
+  watch(
+    thumbsReference,
+    (reference) => {
+      if (reference) {
+        useIntersectionObserver(
+          singleThumbReference,
+          ([{ isIntersecting }]) => {
+            thumbnailIntersected.value = isIntersecting;
+          },
+          {
+            root: unrefElement(reference),
+            rootMargin: '0px',
+            threshold: 1,
+          },
+        );
+      }
+    },
+    { immediate: true },
+  );
+};
+
+registerThumbsWatch(firstThumbReference, firstVisibleThumbnailIntersected);
+registerThumbsWatch(lastThumbReference, lastVisibleThumbnailIntersected);
+
+const onChangeIndex = (index: number) => {
+  stop();
+  activeIndex.value = clamp(index, 0, props.images.length - 1);
+  start();
+};
+const onScroll = ({ left, scrollWidth }: SfScrollableOnScrollData) => {
+  if (!isPending.value) {
+    onChangeIndex(Math.round(left / (scrollWidth / props.images.length)));
+  }
+};
+const assignReference = (element: Element | ComponentPublicInstance | null, index: number) => {
+  if (!element) return;
+  if (index === props.images.length - 1) {
+    lastThumbReference.value = element as HTMLButtonElement;
+  } else if (index === 0) {
+    firstThumbReference.value = element as HTMLButtonElement;
+  }
+};
+</script>

package/app/components/Gallery/__tests__/Gallery.spec.ts

@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils';
+import Gallery from '~/components/Gallery/Gallery.vue';
+
+describe('<Gallery />', () => {
+  it('should render component', () => {
+    const { getByTestId } = mount(Gallery, {
+      props: {
+        images: [{ alt: 'Test', url: '/images/test.webp' }],
+      },
+    });
+
+    expect(getByTestId('gallery'));
+  });
+});

package/app/components/Heading/Heading.vue

@@ -0,0 +1,14 @@
+<template>
+  <component :is="tag" :class="className" data-testid="heading">
+    {{ title }}
+  </component>
+</template>
+
+<script setup lang="ts">
+import type { HeadingProps } from '~/components/Heading/types';
+
+withDefaults(defineProps<HeadingProps>(), {
+  tag: 'h1',
+  className: 'text-center mb-6 font-bold typography-headline-3 md:typography-headline-2',
+});
+</script>

package/app/components/Heading/__tests__/Heading.spec.ts

@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils';
+import Heading from '~/components/Heading/Heading.vue';
+
+describe('<Heading />', () => {
+  it('should render component', () => {
+    const { getByTestId } = mount(Heading, {
+      props: {
+        title: 'test',
+      },
+    });
+
+    expect(getByTestId('heading'));
+  });
+});

package/app/components/Heading/types.ts

@@ -0,0 +1,5 @@
+export type HeadingProps = {
+  title: string;
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  className?: string;
+};

package/app/components/media/audioGallery.vue

@@ -0,0 +1,70 @@
+<template>
+    <client-only>
+        <div ref="galleryRef" class="audio-gallery">
+            <NuxtLink v-for="item in items" :key="item.id" class="gallery-item" :data-sub-html="audioHtml(item)"
+                :href="placeholder">
+                <v-card class="audio-card">
+                    <v-card-title>
+                        {{ item.directus_files_id?.title || 'Audio File' }}
+                    </v-card-title>
+                </v-card>
+            </NuxtLink>
+        </div>
+    </client-only>
+</template>
+
+<script setup>
+    import {
+        ref,
+        onMounted
+    } from 'vue'
+
+    const props = defineProps({
+        items: {
+            type: Array,
+            default: () => []
+        },
+    })
+
+    const galleryRef = ref(null)
+
+    const runtime = useRuntimeConfig()
+    const base = runtime.public.directus.url
+
+    const fileUrl = (item) => `${base}assets/${item.directus_files_id.id}`
+
+    // Transparent pixel placeholder (required by LightGallery)
+    const placeholder =
+        'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
+
+    const audioHtml = (item) => `
+  <div style="padding:20px;text-align:center;">
+    <audio controls style="width:100%;">
+      <source src="${fileUrl(item)}" type="audio/mpeg">
+    </audio>
+  </div>
+`
+
+    onMounted(async () => {
+        const lg = await import('lightgallery')
+        const lightGallery = lg.default
+
+        lightGallery(galleryRef.value, {
+            speed: 400,
+            download: false,
+        })
+    })
+</script>
+
+<style scoped>
+    .audio-gallery {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .audio-card {
+        padding: 10px;
+        cursor: pointer;
+    }
+</style>

package/app/components/media/dragDropUpload.vue

@@ -0,0 +1,67 @@
+<template>
+    <v-dialog max-width="500">
+        <template v-slot:activator="{ props: activatorProps }">
+            <v-btn color="primary" v-bind="activatorProps" icon="fas fa-gear" size="medium"
+                title="Upload Media"></v-btn>
+        </template>
+
+        <template v-slot:default="{ isActive }">
+            <v-card title="Dialog">
+                <v-card-text>
+                    <div v-if="formError" class="error">{{ formError }}</div>
+                    <div v-else-if="formSuccess" class="success">{{ formSuccess }}</div>
+                    <form @submit.prevent="submitForm">
+                        <DirectusFormElement v-for="field in mediaFields" :key="field.field" :field="field"
+                            v-model="form[field.field]" />
+                        <v-btn type="submit">Post</v-btn>
+                    </form>
+                </v-card-text>
+            </v-card>
+        </template>
+    </v-dialog>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import DirectusFormElement from '~/components/ui/forms/DirectusFormElement.vue'
+    import {
+        useDirectusForm
+    } from '~/composables/globals/useDirectusForm'
+
+    const dialog = ref(false)
+    const {
+        $directus,
+        $readFieldsByCollection
+    } = useNuxtApp()
+
+    const {
+        data,
+        error
+    } = await useAsyncData('media', async () => {
+        return $directus.request($readFieldsByCollection('media'))
+    })
+
+    // guard against undefined/null data.value and empty arrays
+    if (error.value || data.value == null || (data.value?.length ?? 0) === 0) {
+        console.error(error)
+        throw createError({
+            statusCode: 404,
+            statusMessage: 'Note not found'
+        })
+    }
+
+    const mediaFields = data
+
+    // use composable for form handling (validation, submit, provide context)
+    const {
+        form,
+        formError,
+        formSuccess,
+        submitForm
+    } = useDirectusForm('media', mediaFields, {
+        clearOnSuccess: true,
+        closeDialogRef: dialog
+    })
+</script>

package/app/components/media/fullscreenMediaModal.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-dialog :model-value="modelValue" max-width="960" @update:model-value="$emit('update:model-value', $event)">
+    <v-card v-if="item">
+      <v-toolbar density="comfortable">
+        <v-toolbar-title>
+          {{ file?.title || file?.filename_download || 'Media' }}
+        </v-toolbar-title>
+        <v-spacer />
+        <v-btn icon="mdi-close" @click="$emit('update:model-value', false)" />
+      </v-toolbar>
+
+      <v-card-text>
+        <div v-if="mime.startsWith('image')" class="viewer">
+          <img :src="fileUrl" :alt="file?.title || 'Image'" />
+        </div>
+
+        <div v-else-if="mime.startsWith('video')" class="viewer">
+          <video :src="fileUrl" controls style="max-width: 100%;" />
+        </div>
+
+        <div v-else-if="mime.startsWith('audio')" class="viewer">
+          <audio :src="fileUrl" controls style="width: 100%;" />
+        </div>
+
+        <div v-else class="viewer">
+          <p>Preview not available for this file type.</p>
+          <v-btn color="primary" :href="fileUrl" target="_blank">
+            Open file
+          </v-btn>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+  import {
+    computed
+  } from 'vue'
+
+  const props = defineProps({
+    modelValue: Boolean,
+    item: Object,
+  })
+  defineEmits(['update:model-value'])
+
+  const config = useRuntimeConfig()
+  const file = computed(() => props.item?.directus_files_id || null)
+  const mime = computed(() => file.value?.type || '')
+  const fileUrl = computed(() =>
+    file.value?.id ? `${config.public.directus.url}/assets/${file.value.id}` : ''
+  )
+</script>
+
+<style scoped>
+  .viewer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .viewer img {
+    max-width: 100%;
+    max-height: 75vh;
+  }
+</style>

package/app/components/media/imageCard.vue

@@ -0,0 +1,65 @@
+<template>
+    <v-card class="image-card" elevation="2" rounded="lg">
+        <!-- IMAGE PREVIEW -->
+        <v-img :src="fileUrl" :alt="media?.title || media?.filename_download || 'Image'" height="180" cover
+            class="image-preview" @click="openFull" />
+
+        <!-- TITLE -->
+        <v-card-text class="py-2 text-truncate">
+            {{ media?.title || media?.filename_download || 'Untitled image' }}
+        </v-card-text>
+
+        <!-- ACTIONS SLOT -->
+        <v-card-actions>
+            <slot name="actions" />
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script setup>
+    import {
+        computed
+    } from 'vue'
+
+    const props = defineProps({
+        media: {
+            type: Object,
+            required: true,
+        },
+    })
+
+    const config = useRuntimeConfig()
+
+    // Build Directus file URL
+    const fileUrl = computed(() => {
+        if (!props.media?.id) return ''
+        return `${config.public.directus.url}/assets/${props.media.id}`
+    })
+
+    // Open full image in new tab
+    function openFull() {
+        if (fileUrl.value) window.open(fileUrl.value, '_blank')
+    }
+</script>
+
+<style scoped>
+    .image-card {
+        cursor: pointer;
+        transition: box-shadow 0.2s ease;
+    }
+
+    .image-card:hover {
+        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
+    }
+
+    .image-preview {
+        border-top-left-radius: inherit;
+        border-top-right-radius: inherit;
+    }
+
+    .text-truncate {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+</style>

package/app/components/media/imageGallery.vue

@@ -0,0 +1,40 @@
+<template>
+    <client-only>
+        <div ref="galleryRef" class="image-gallery">
+            <NuxtLink v-for="item in items" :key="item.id" :href="fileUrl(item)" class="gallery-item">
+                <img :src="fileUrl(item)" :alt="item.directus_files_id?.title || 'Image'" />
+            </NuxtLink>
+        </div>
+    </client-only>
+</template>
+
+<script setup>
+    import {
+        onMounted,
+        ref
+    } from 'vue'
+
+    const props = defineProps({
+        items: Array,
+    })
+
+    const galleryRef = ref(null)
+
+    const fileUrl = (item) =>
+        `${useRuntimeConfig().public.directus.url}assets/${item.directus_files_id.id}`
+
+    onMounted(async () => {
+        const lg = await import('lightgallery')
+        const lightGallery = lg.default
+
+        const lgThumbnail = (await import('lg-thumbnail')).default
+        const lgZoom = (await import('lg-zoom')).default
+
+        lightGallery(galleryRef.value, {
+            plugins: [lgThumbnail, lgZoom],
+            speed: 400,
+            thumbnail: true,
+            zoom: true,
+        })
+    })
+</script>

package/app/components/media/mediaCard.vue

@@ -0,0 +1,89 @@
+<template>
+    <v-card class="media-card" elevation="2" rounded="lg" @click="emit('open', media)">
+        <!-- THUMBNAIL -->
+        <div class="thumb-wrapper">
+            <component :is="thumbnailComponent" :media="media" class="thumb" />
+        </div>
+
+        <!-- TITLE -->
+        <v-card-text class="py-2 text-truncate">
+            {{ media?.title || media?.filename_download || 'Untitled file' }}
+        </v-card-text>
+
+        <!-- OPTIONAL ACTIONS -->
+        <v-card-actions v-if="$slots.actions">
+            <slot name="actions" />
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script setup>
+    import {
+        computed
+    } from 'vue'
+    import imageCard from '#shared/app/components/media/imageCard.vue'
+    import mediaPlayer from '#shared/app/components/media/mediaPlayer.vue'
+
+    const props = defineProps({
+        media: {
+            type: Object,
+            required: true,
+        },
+    })
+
+    const emit = defineEmits(['open'])
+
+    const mime = computed(() => props.media?.type || '')
+
+    const thumbnailComponent = computed(() => {
+        if (mime.value.startsWith('image')) return imageCard
+        if (mime.value.startsWith('audio') || mime.value.startsWith('video')) return mediaPlayer
+        return {
+            template: `
+      <div class="generic-thumb">
+        <v-icon size="48">mdi-file</v-icon>
+      </div>
+    `,
+        }
+    })
+</script>
+
+<style scoped>
+    .media-card {
+        cursor: pointer;
+        transition: box-shadow 0.2s ease;
+    }
+
+    .media-card:hover {
+        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
+    }
+
+    .thumb-wrapper {
+        width: 100%;
+        height: 160px;
+        overflow: hidden;
+        border-top-left-radius: inherit;
+        border-top-right-radius: inherit;
+    }
+
+    .thumb {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .generic-thumb {
+        width: 100%;
+        height: 100%;
+        background: #f3f3f3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .text-truncate {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+</style>