@meeovi/layer-shared 1.0.0

package/app/components/media/mediaCarousel.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="media-carousel">
+    <v-slide-group show-arrows>
+      <v-slide-group-item
+        v-for="item in items"
+        :key="item.id"
+      >
+        <div class="media-carousel-item" @click="open(item)">
+          <component
+            :is="thumbComponent(item)"
+            :media="item.directus_files_id"
+          />
+        </div>
+      </v-slide-group-item>
+    </v-slide-group>
+
+    <FullscreenMediaModal
+      :model-value="!!activeItem"
+      :item="activeItem"
+      @update:model-value="val => !val && close()"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import imageCard from '#shared/app/components/media/imageCard.vue'
+import mediaCard from '#shared/app/components/media/mediaCard.vue'
+import mediaPlayer from '#shared/app/components/media/mediaPlayer.vue'
+import FullscreenMediaModal from '#shared/app/components/media/FullscreenMediaModal.vue'
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+})
+
+const activeItem = ref(null)
+
+const mime = (item) => item?.directus_files_id?.type || ''
+
+// ⭐ THIS IS WHERE thumbComponent GOES
+const thumbComponent = (item) => {
+  const t = mime(item)
+  if (t.startsWith('image')) return imageCard
+  if (t.startsWith('audio') || t.startsWith('video')) return mediaPlayer
+  return mediaCard
+}
+
+const open = (item) => {
+  activeItem.value = item
+}
+
+const close = () => {
+  activeItem.value = null
+}
+</script>
+
+<style scoped>
+.media-carousel {
+  margin-top: 1rem;
+}
+.media-carousel-item {
+  width: 220px;
+  margin-right: 12px;
+}
+</style>

package/app/components/media/mediaFolderSidebar.vue

@@ -0,0 +1,72 @@
+<template>
+    <v-navigation-drawer permanent width="260" class="media-folder-sidebar">
+        <v-list>
+            <v-list-item>
+                <v-list-item-title class="text-h6">Folders</v-list-item-title>
+            </v-list-item>
+
+            <v-list-item v-for="(folder, index) in localFolders" :key="folder.id" draggable="true"
+                @dragstart="onDragStart(index)" @dragover.prevent @drop="onDrop(index)"
+                @click="$emit('select', folder)">
+                <v-list-item-title>{{ folder.name }}</v-list-item-title>
+            </v-list-item>
+
+            <v-divider class="my-3" />
+
+            <v-list-item>
+                <v-btn block color="primary" @click="createNewFolder">
+                    New Folder
+                </v-btn>
+            </v-list-item>
+        </v-list>
+    </v-navigation-drawer>
+</template>
+
+<script setup>
+    import {
+        ref,
+        watch
+    } from 'vue'
+
+    const props = defineProps({
+        folders: {
+            type: Array,
+            default: () => []
+        },
+    })
+    const emit = defineEmits(['create', 'select', 'reorder'])
+
+    const localFolders = ref([...props.folders])
+    const dragIndex = ref(null)
+
+    watch(
+        () => props.folders,
+        (val) => {
+            localFolders.value = [...val]
+        }
+    )
+
+    const onDragStart = (index) => {
+        dragIndex.value = index
+    }
+    const onDrop = (targetIndex) => {
+        if (dragIndex.value === null) return
+        const updated = [...localFolders.value]
+        const [moved] = updated.splice(dragIndex.value, 1)
+        updated.splice(targetIndex, 0, moved)
+        localFolders.value = updated
+        dragIndex.value = null
+        emit('reorder', updated)
+    }
+
+    const createNewFolder = () => {
+        const name = prompt('Folder name')
+        if (name) emit('create', name)
+    }
+</script>
+
+<style scoped>
+    .media-folder-sidebar {
+        border-right: 1px solid #ddd;
+    }
+</style>

package/app/components/media/mediaPlayer.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <video ref="videoPlayer" class="video-js"></video>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import useVideojs from '~/composables/media/useVideojs'
+
+defineOptions({ name: 'VideoPlayer' })
+
+const props = defineProps({
+  options: {
+    type: Object,
+    default: () => ({})
+  },
+  // optional media prop (kept for compatibility)
+  media: {
+    type: Object,
+    required: false
+  }
+})
+
+const { createPlayer, disposePlayer } = useVideojs()
+
+const videoPlayer = ref(null)
+const player = ref(null)
+
+onMounted(() => {
+  const p = createPlayer(videoPlayer.value, props.options, function () {
+    this.log && this.log('onPlayerReady', this)
+  })
+  player.value = p
+})
+
+onBeforeUnmount(() => {
+  disposePlayer(player.value)
+})
+</script>

package/app/components/media/mediaSearchBar.vue

@@ -0,0 +1,16 @@
+<template>
+    <v-text-field v-model="query" label="Search media" prepend-inner-icon="mdi-magnify" clearable @input="emitSearch" />
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+
+    const query = ref('')
+    const emit = defineEmits(['search'])
+
+    function emitSearch() {
+        emit('search', query.value)
+    }
+</script>

package/app/components/media/videoGallery.vue

@@ -0,0 +1,77 @@
+<template>
+    <client-only>
+        <div id="gallery-videojs">
+            <NuxtLink data-lg-size="1280-720"
+                data-video='{"source": [{"src":"/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
+                data-poster="/images/demo/youtube-video-poster.jpg"
+                data-sub-html="<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>">
+                <img width="300" height="100" class="img-responsive" src="../../assets/images/demo/youtube-video-poster.jpg" />
+            </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}`
+    const thumbnail = (item) => `${base}assets/${item.directus_files_id.id}?key=thumbnail`
+
+    const videoConfig = (item) =>
+        JSON.stringify({
+            source: [{
+                src: fileUrl(item),
+                type: 'video/mp4',
+            }, ],
+            attributes: {
+                preload: false,
+                controls: true,
+            },
+        })
+
+    onMounted(async () => {
+        const lg = await import('lightgallery')
+        const lightGallery = lg.default
+
+        const lgVideo = (await import('lg-video')).default
+
+        lightGallery(document.getElementById('gallery-videojs'), {
+            plugins: [lgVideo],
+            videojs: true,
+            videojsOptions: {
+                muted: true,
+            },
+        });
+
+    })
+</script>
+
+<style scoped>
+    .video-gallery {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+
+    .gallery-item img {
+        width: 200px;
+        height: 140px;
+        object-fit: cover;
+        border-radius: 8px;
+    }
+</style>

package/app/components/ui/AccordionItem/AccordionItem.vue

@@ -0,0 +1,24 @@
+<template>
+  <SfAccordionItem v-model="internalModelValue" :summary-class="summaryClass" data-testid="accordion-item">
+    <template #summary>
+      <slot name="summary">
+        <p>{{ summary }}</p>
+      </slot>
+      <SfIconChevronLeft :class="['text-neutral-500', modelValue ? 'rotate-90' : '-rotate-90']" />
+    </template>
+    <div class="py-2 px-4">
+      <slot />
+    </div>
+  </SfAccordionItem>
+</template>
+
+<script setup lang="ts">
+import { SfAccordionItem, SfIconChevronLeft } from '@storefront-ui/vue';
+import { useVModel } from '@vueuse/core';
+import type { AccordionItemProps } from '~/components/ui/AccordionItem/types';
+
+const props = withDefaults(defineProps<AccordionItemProps>(), { modelValue: false, summary: '', summaryClass: '' });
+const emit = defineEmits(['update:modelValue']);
+
+const internalModelValue = useVModel(props, 'modelValue', emit, { passive: true });
+</script>

package/app/components/ui/AccordionItem/__tests__/AccordionItem.spec.ts

@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils';
+import AccordionItem from '~/components/ui/AccordionItem/AccordionItem.vue';
+
+describe('<AccordionItem />', () => {
+  it('should render component', () => {
+    const { getByTestId } = mount(AccordionItem, {
+      props: {
+        breadcrumbs: [],
+      },
+    });
+
+    expect(getByTestId('accordion-item'));
+  });
+});

package/app/components/ui/AccordionItem/types.ts

@@ -0,0 +1,5 @@
+export type AccordionItemProps = {
+  modelValue?: boolean;
+  summary?: string;
+  summaryClass?: string;
+};

package/app/components/ui/Alert/Alert.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :class="['inline-flex items-center justify-center', classes]">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+const sizeClasses = {
+  sm: 'text-xs p-1 gap-1',
+  base: 'text-sm p-1.5 gap-1.5',
+};
+</script>
+
+<script setup lang="ts">
+import type { AlertProps } from '~/components/ui/Alert/types';
+
+const props = withDefaults(defineProps<AlertProps>(), {
+  size: 'base',
+  strong: false,
+  variant: 'primary',
+});
+
+const classes = computed(() => [
+  sizeClasses[props.size],
+  props.strong ? 'text-white font-medium rounded-none' : 'rounded-md font-normal',
+  {
+    [`text-primary-800 ${props.strong ? 'bg-primary-600' : 'bg-primary-100'}`]: props.variant === 'primary',
+    [`text-secondary-800 ${props.strong ? 'bg-secondary-800' : 'bg-secondary-100'}`]: props.variant === 'secondary',
+    [`text-negative-800 ${props.strong ? 'bg-negative-600' : 'bg-negative-100'}`]: props.variant === 'negative',
+    [`text-neutral-900 border border-neutral-200 ${props.strong ? 'bg-neutral-600' : 'bg-neutral-100'}`]:
+      props.variant === 'neutral',
+  },
+]);
+</script>

package/app/components/ui/Alert/types.ts

@@ -0,0 +1,5 @@
+export interface AlertProps {
+  size?: 'sm' | 'base';
+  strong?: boolean;
+  variant?: 'primary' | 'secondary' | 'negative' | 'neutral';
+}

package/app/components/ui/Breadcrumbs/Breadcrumbs.vue

@@ -0,0 +1,76 @@
+<template>
+  <nav data-testid="breadcrumbs" class="inline-flex items-center text-sm font-normal font-body">
+    <ol class="flex w-auto leading-none group md:flex-wrap">
+      <li class="flex items-center sm:hidden text-neutral-500 z-10">
+        <NuxtLazyHydrate :on-interaction="['click', 'touchstart']">
+          <SfDropdown v-model="dropdownOpened" strategy="absolute" placement="bottom-start" @update:model-value="close">
+            <template #trigger>
+              <SfButton
+                class="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
+                :aria-label="$t('breadcrumbsDropdownText')"
+                variant="tertiary"
+                square
+                @click="toggle"
+                data-testid="breadcrumbs-dropdown-button"
+              >
+                <template #prefix>
+                  <SfIconMoreHoriz
+                    size="sm"
+                    class="text-neutral-500 hover:text-primary-700 active:text-primary-800 active:bg-transparent"
+                  />
+                </template>
+              </SfButton>
+            </template>
+            <ol class="px-4 py-2 rounded-md shadow-md border-neutral-100 bg-white" data-testid="breadcrumbs-dropdown">
+              <li v-for="item in breadcrumbs" :key="item.name" class="py-2 last-of-type:hidden">
+                <SfLink
+                  :tag="NuxtLink"
+                  :to="item.link"
+                  variant="secondary"
+                  class="leading-5 no-underline text-inherit hover:underline active:underline whitespace-nowrap outline-secondary-600"
+                >
+                  {{ item.name }}
+                </SfLink>
+              </li>
+            </ol>
+          </SfDropdown>
+        </NuxtLazyHydrate>
+      </li>
+      <li
+        v-for="(item, index) in breadcrumbs"
+        :key="item.name"
+        class="peer hidden sm:flex items-center peer-[:nth-of-type(even)]:before:content-['/'] peer-[:nth-of-type(even)]:before:px-2 peer-[:nth-of-type(even)]:before:leading-5 last-of-type:flex last-of-type:before:font-normal last-of-type:before:text-neutral-500 text-neutral-500 last-of-type:text-neutral-900 last-of-type:font-medium"
+      >
+        <SfLink
+          v-if="index < breadcrumbs.length - 1"
+          :tag="NuxtLink"
+          :to="item.link"
+          variant="secondary"
+          class="leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600 text-inherit"
+        >
+          {{ item.name }}
+        </SfLink>
+        <span v-else>
+          {{ item.name }}
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { SfDropdown, SfButton, SfLink, SfIconMoreHoriz } from '@storefront-ui/vue';
+import type { BreadcrumbsProps } from '~/components/ui/Breadcrumbs/types';
+
+defineProps<BreadcrumbsProps>();
+
+const dropdownOpened = ref(false);
+const close = () => {
+  dropdownOpened.value = false;
+};
+const toggle = () => {
+  dropdownOpened.value = !dropdownOpened.value;
+};
+
+const NuxtLink = resolveComponent('NuxtLink');
+</script>

package/app/components/ui/Breadcrumbs/__tests__/Breadcrumbs.spec.ts

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

package/app/components/ui/Breadcrumbs/types.ts

@@ -0,0 +1,8 @@
+export type Breadcrumb = {
+  name: string;
+  link: string;
+};
+
+export type BreadcrumbsProps = {
+  breadcrumbs: Breadcrumb[];
+};

package/app/components/ui/CartProductCard/CartProductCard.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    class="relative flex first:border-t border-b-[1px] border-neutral-200 hover:shadow-lg min-w-[320px] p-4 last:mb-0"
+    data-testid="cart-product-card"
+  >
+    <div class="relative overflow-hidden rounded-md w-[100px] sm:w-[176px]">
+      <SfLink :tag="NuxtLink" :to="`${paths.product}${slug}`">
+        <NuxtImg
+          class="w-full h-auto border rounded-md border-neutral-200"
+          :src="imageUrl ?? '/images/product.webp'"
+          :alt="imageAlt ?? ''"
+          width="300"
+          height="300"
+          loading="lazy"
+          format="webp"
+        />
+      </SfLink>
+      <div class="absolute top-0 left-0 text-white bg-secondary-600 py-1 pl-1.5 pr-2 text-xs font-medium">
+        <SfIconSell size="xs" class="mr-1" />
+        {{ $t('sale') }}
+      </div>
+    </div>
+    <div class="flex flex-col pl-4 min-w-[180px] flex-1">
+      <SfLink
+        :tag="NuxtLink"
+        :to="`${paths.product}${slug}`"
+        variant="secondary"
+        class="no-underline typography-text-sm sm:typography-text-lg"
+      >
+        {{ name }}
+      </SfLink>
+      <div class="my-2 sm:mb-0">
+        <ul class="text-xs font-normal leading-5 sm:typography-text-sm text-neutral-700">
+          <li v-for="attribute in attributes" :key="attribute.name">
+            <span class="mr-1">{{ attribute.name }}:</span>
+            <span class="font-medium">{{ attribute.label }}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="items-start sm:items-center sm:mt-auto flex flex-col sm:flex-row">
+        <span
+          v-if="specialPrice"
+          class="text-secondary-700 sm:order-1 font-bold typography-text-sm sm:typography-text-lg sm:ml-auto"
+        >
+          ${{ specialPrice }}
+          <span class="text-neutral-500 ml-2 line-through typography-text-xs sm:typography-text-sm font-normal">
+            ${{ price }}
+          </span>
+        </span>
+        <span v-else class="font-bold sm:ml-auto sm:order-1 typography-text-sm sm:typography-text-lg">
+          ${{ price }}
+        </span>
+        <UiQuantitySelector :min-value="minValue" :max-value="maxValue" class="mt-4 sm:mt-0" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SfLink, SfIconSell } from '@storefront-ui/vue';
+import type { CartProductCardProps } from '~/components/ui/CartProductCard/types';
+
+defineProps<CartProductCardProps>();
+
+const NuxtLink = resolveComponent('NuxtLink');
+</script>

package/app/components/ui/CartProductCard/types.ts

@@ -0,0 +1,18 @@
+export interface Attribute {
+  label: string;
+  name: string;
+  value: string;
+}
+
+export type CartProductCardProps = {
+  attributes: Attribute[];
+  imageUrl?: string | null;
+  imageAlt?: string | null;
+  maxValue: number;
+  minValue: number;
+  name: string;
+  price: number;
+  specialPrice: number;
+  value: number;
+  slug: string;
+};

package/app/components/ui/CategoryCard/CategoryCard.vue

@@ -0,0 +1,41 @@
+<template>
+  <NuxtLazyHydrate when-visible>
+    <div
+      class="max-w-screen-3xl mx-auto md:px-10 px-4 mb-10 flex flex-nowrap md:flex-wrap md:justify-center overflow-x-scroll scrollbar-hidden"
+      data-testid="category-card"
+    >
+      <div v-for="item in items" :key="item.name" class="mr-2 md:mr-6 group">
+        <NuxtLink
+          :to="item.slug"
+          class="w-full h-full z-1 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-md"
+        >
+          <div
+            class="relative h-[240px] w-[240px] rounded-full bg-neutral-100 group-hover:shadow-xl group-active:shadow-none"
+          >
+            <NuxtImg
+              :src="item.image"
+              :alt="$t('imageOfSth', { name: item.name })"
+              width="240"
+              height="240"
+              loading="lazy"
+              format="webp"
+            />
+          </div>
+          <div class="flex justify-center">
+            <p
+              class="mt-4 font-semibold no-underline text-normal-900 typography-text-base group-hover:underline group-hover:text-primary-800 group-hover:font-normal group-active:text-primary-800 group-active:font-normal"
+            >
+              {{ item.name }}
+            </p>
+          </div>
+        </NuxtLink>
+      </div>
+    </div>
+  </NuxtLazyHydrate>
+</template>
+
+<script setup lang="ts">
+import type { CategoryCardProps } from '~/components/ui/CategoryCard/types';
+
+defineProps<CategoryCardProps>();
+</script>

package/app/components/ui/CategoryCard/types.ts

@@ -0,0 +1,9 @@
+import type { SfCategory } from '@vue-storefront/unified-data-model';
+
+interface CategoryWithImage extends SfCategory {
+  image: string;
+}
+
+export type CategoryCardProps = {
+  items: CategoryWithImage[];
+};

package/app/components/ui/Display/Display.vue

@@ -0,0 +1,55 @@
+<template>
+  <NuxtLazyHydrate when-visible>
+    <div
+      class="flex flex-col md:flex-row flex-wrap gap-6 max-w-screen-3xl mx-auto px-4 md:px-10 mb-10"
+      data-testid="display"
+    >
+      <div
+        v-for="item in items"
+        :key="item.title"
+        class="relative flex md:max-w-screen-3xl md:[&:not(:first-of-type)]:flex-1 md:first-of-type:w-full first:bg-secondary-200 last:bg-warning-200 even:bg-negative-200"
+      >
+        <div
+          :class="[
+            'flex overflow-hidden grow flex-col',
+            {
+              'flex-col-reverse': item.reverse,
+              'md:flex-row-reverse': item.reverse,
+            },
+          ]"
+        >
+          <div class="flex flex-1 flex-col justify-center items-center md:items-start p-6 lg:p-10 max-w-1/2">
+            <p :class="['uppercase typography-text-xs block font-bold tracking-widest', item.subtitleClass]">
+              {{ item.subtitle }}
+            </p>
+            <h2 :class="['mb-4 mt-2 font-bold typography-headline-3', item.titleClass]">
+              {{ item.title }}
+            </h2>
+            <p class="typography-text-base block text-center md:text-left mb-4">{{ item.description }}</p>
+            <SfButton class="!bg-black" :tag="NuxtLink" :to="paths.category">
+              {{ item.buttonText }}
+            </SfButton>
+          </div>
+          <NuxtImg
+            :src="item.image"
+            :alt="item.title"
+            class="w-full md:w-1/2 self-end object-contain flex-1"
+            width="300"
+            height="300"
+            loading="lazy"
+            format="webp"
+          />
+        </div>
+      </div>
+    </div>
+  </NuxtLazyHydrate>
+</template>
+
+<script setup lang="ts">
+import { SfButton } from '@storefront-ui/vue';
+import type { DisplayProps } from '~/components/ui/Display/types';
+
+defineProps<DisplayProps>();
+
+const NuxtLink = resolveComponent('NuxtLink');
+</script>

package/app/components/ui/Display/types.ts

@@ -0,0 +1,12 @@
+export type DisplayProps = {
+  items: {
+    image: string;
+    title: string;
+    subtitle: string;
+    description: string;
+    buttonText: string;
+    reverse: boolean;
+    titleClass: string;
+    subtitleClass: string;
+  }[];
+};

package/app/components/ui/Divider/Divider.vue

@@ -0,0 +1,3 @@
+<template>
+  <hr class="w-full h-px bg-neutral-200" data-testid="divider" />
+</template>