@ulu/frontend-vue 0.2.0-beta.8 → 0.3.0

package/lib/components/elements/UluDefinitionList.vue

@@ -1,5 +1,9 @@
 <template>
-  <dl class="definition-list" :class="[resolvedModifiers, classes.list]">
+  <dl 
+    v-if="items?.length"
+    class="definition-list" 
+    :class="[resolvedModifiers, classes.list]"
+  >
     <div 
       v-for="(item, index) in items" 
       :key="index"
@@ -11,9 +15,19 @@
         </slot>
       </dt>
       
-      <dd :class="classes.description">
-        <slot name="description" :item="item" :index="index">
-          {{ item.description }}
+      <dd 
+        v-for="(desc, descIndex) in getDescriptions(item)"
+        :key="descIndex"
+        :class="classes.description"
+      >
+        <slot 
+          name="description" 
+          :item="item" 
+          :description="desc" 
+          :index="index"
+          :descriptionIndex="descIndex"
+        >
+          {{ desc }}
         </slot>
       </dd>
     </div>
@@ -26,7 +40,7 @@
 
   const props = defineProps({
     /**
-     * Array of term, and description (props in object)
+     * Array of objects with term, and description (string or array of strings)
      * - Can use slots also
      */
     items: Array,
@@ -86,4 +100,11 @@
     internal: internalModifiers,
     baseClass: "definition-list"
   });
-</script>
+
+  const getDescriptions = (item) => {
+    if (Array.isArray(item.description)) {
+      return item.description;
+    }
+    return [item.description];
+  };
+</script>

package/lib/components/elements/UluImage.vue

@@ -0,0 +1,56 @@
+<template>
+  <picture v-if="sources?.length" :class="classes?.picture">
+    <source 
+      v-for="(source, index) in sources" 
+      :key="index"
+      v-bind="source" 
+    />
+    <img 
+      :src="src" 
+      :alt="alt"
+      :class="classes?.img"
+      v-bind="$attrs" 
+    />
+  </picture>
+
+  <img 
+    v-else
+    :src="src" 
+    :alt="alt"
+    :class="classes?.img"
+    v-bind="$attrs" 
+  />
+</template>
+
+<script setup>
+  defineOptions({
+    inheritAttrs: false
+  });
+
+  defineProps({
+    src: {
+      type: String,
+      required: true
+    },
+    alt: {
+      type: String,
+      default: ''
+    },
+    /**
+     * Array of source objects for <picture> tag.
+     * Example: [{ srcset: '/small.jpg', media: '(max-width: 600px)' }]
+     */
+    sources: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Granular class targeting for internal elements.
+     * Example: { picture: 'my-picture-class', img: 'my-img-class' }
+     */
+    classes: {
+      type: Object,
+      default: () => ({})
+    }
+  });
+</script>

package/lib/components/elements/UluList.vue

@@ -1,5 +1,6 @@
 <template>
   <component 
+    v-if="items?.length"
     :is="listElement"
     :class="[
       {

package/lib/components/elements/UluOverflowScroller.vue

@@ -0,0 +1,140 @@
+<template>
+  <component :is="element">
+    <slot :setTrackRef="setTrackRef" :onScroll="onScroll" :canScrollLeft="canScrollLeft" :canScrollRight="canScrollRight"></slot>
+    
+    <ul v-if="controls" :class="[`${namespace}__controls`, controlsClass]">
+      <li :class="[`${namespace}__controls-item`, `${namespace}__controls-item--previous`, { [`${namespace}__controls-item--disabled`]: !canScrollLeft }]">
+        <button 
+          :class="[`${namespace}__control-button`, `${namespace}__control-button--previous`, ...buttonClasses]"
+          aria-label="Scroll Left"
+          :aria-controls="trackId"
+          @click="scrollLeft"
+          :disabled="!canScrollLeft"
+        >
+          <slot name="previous">
+            <span class="hidden-visually">Previous</span>
+            <UluIcon :icon="iconClassPrevious" :class="`${namespace}__control-icon`" />
+          </slot>
+        </button>
+      </li>
+      <li :class="[`${namespace}__controls-item`, `${namespace}__controls-item--next`, { [`${namespace}__controls-item--disabled`]: !canScrollRight }]">
+        <button 
+          :class="[`${namespace}__control-button`, `${namespace}__control-button--next`, ...buttonClasses]"
+          aria-label="Scroll Right"
+          :aria-controls="trackId"
+          @click="scrollRight"
+          :disabled="!canScrollRight"
+        >
+          <slot name="next">
+            <span class="hidden-visually">Next</span>
+            <UluIcon :icon="iconClassNext" :class="`${namespace}__control-icon`" />
+          </slot>
+        </button>
+      </li>
+    </ul>
+  </component>
+</template>
+
+<script setup>
+  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+  import UluIcon from './UluIcon.vue';
+
+  const props = defineProps({
+    /**
+     * The HTML element to use as the root wrapper.
+     */
+    element: { type: String, default: 'div' },
+    /**
+     * Show previous/next controls.
+     */
+    controls: { type: Boolean, default: true },
+    /**
+     * The ID of the track element, used for aria-controls.
+     */
+    trackId: { type: String, default: null },
+    /**
+     * Scroll amount (in pixels) for the next/prev buttons.
+     * If 'auto', it scrolls by the visible width of the track.
+     */
+    scrollAmount: { type: [Number, String], default: 'auto' },
+    /**
+     * Scroll behavior ('smooth' or 'auto').
+     */
+    scrollBehavior: { type: String, default: 'smooth' },
+    /**
+     * CSS class namespace for controls.
+     */
+    namespace: { type: String, default: 'OverflowScroller' },
+    /**
+     * Additional class to apply to the controls container.
+     */
+    controlsClass: { type: String, default: '' },
+    /**
+     * Button classes to apply.
+     */
+    buttonClasses: { type: Array, default: () => ['button', 'button--icon'] },
+    /**
+     * Icon definition for previous button.
+     */
+    iconClassPrevious: { type: String, default: 'type:previous' },
+    /**
+     * Icon definition for next button.
+     */
+    iconClassNext: { type: String, default: 'type:next' },
+    /**
+     * Offset threshold to consider "at start" (disables previous button).
+     */
+    offsetStart: { type: Number, default: 10 },
+    /**
+     * Offset threshold to consider "at end" (disables next button).
+     */
+    offsetEnd: { type: Number, default: 10 }
+  });
+
+  const trackRef = ref(null);
+  const canScrollLeft = ref(false);
+  const canScrollRight = ref(false);
+
+  const setTrackRef = (el) => {
+    trackRef.value = el;
+  };
+
+  const checkScrollability = () => {
+    if (!trackRef.value) return;
+    const { scrollLeft, scrollWidth, clientWidth } = trackRef.value;
+    canScrollLeft.value = scrollLeft > props.offsetStart;
+    canScrollRight.value = Math.ceil(scrollLeft + clientWidth) < (scrollWidth - props.offsetEnd);
+  };
+
+  const onScroll = () => {
+    checkScrollability();
+  };
+
+  const scrollByAmount = (direction) => {
+    if (!trackRef.value) return;
+    const { clientWidth } = trackRef.value;
+    let amount = props.scrollAmount;
+    if (amount === 'auto') {
+      amount = clientWidth;
+    }
+    
+    trackRef.value.scrollBy({
+      left: direction === 'right' ? amount : -amount,
+      behavior: props.scrollBehavior
+    });
+  };
+
+  const scrollLeft = () => scrollByAmount('left');
+  const scrollRight = () => scrollByAmount('right');
+
+  onMounted(() => {
+    nextTick(() => {
+      checkScrollability();
+    });
+    window.addEventListener('resize', checkScrollability);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', checkScrollability);
+  });
+</script>

package/lib/components/elements/UluScrollSlider.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="scroll-slider" :class="resolvedModifiers">
+    <UluOverflowScroller 
+      class="scroll-slider__control-context" 
+      controlsClass="scroll-slider__controls"
+      :controls="controls"
+      :scrollAmount="scrollAmount"
+      :scrollBehavior="scrollBehavior"
+      :trackId="trackId"
+    >
+      <template #default="{ setTrackRef, onScroll }">
+        <div class="scroll-slider__track-crop">
+          <ul 
+            class="scroll-slider__track" 
+            :id="trackId"
+            :ref="el => { trackRef = el; setTrackRef(el); }"
+            @scroll="onScroll"
+          >
+            <li v-if="emptySlides" class="scroll-slider__slide scroll-slider__slide--empty" role="presentation">&nbsp;</li>
+            <li 
+              v-for="(item, index) in items" 
+              :key="index"
+              class="scroll-slider__slide"
+              :ref="el => setSlideRef(el, index)"
+            >
+              <slot 
+                name="slide" 
+                :item="item" 
+                :index="index"
+                :isIntersecting="intersectingIndexes.includes(index)"
+              ></slot>
+            </li>
+            <li v-if="emptySlides" class="scroll-slider__slide scroll-slider__slide--empty" role="presentation">&nbsp;</li>
+          </ul>
+        </div>
+      </template>
+      <template v-if="$slots.previous" #previous>
+        <slot name="previous"></slot>
+      </template>
+      <template v-if="$slots.next" #next>
+        <slot name="next"></slot>
+      </template>
+    </UluOverflowScroller>
+  </div>
+</template>
+
+<script setup>
+  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+  import { useModifiers } from '../../composables/useModifiers.js';
+  import { newId } from '../../utils/dom.js';
+  import UluOverflowScroller from './UluOverflowScroller.vue';
+
+  const props = defineProps({
+    /**
+     * Array of items to render.
+     */
+    items: {
+      type: Array,
+      required: true,
+    },
+    /**
+     * Show previous/next controls.
+     */
+    controls: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Scroll amount (in pixels) for the next/prev buttons.
+     * If not provided, it defaults to the visible width of the track.
+     */
+    scrollAmount: {
+      type: [Number, String],
+      default: 'auto',
+    },
+    /**
+     * Scroll behavior ('smooth' or 'auto').
+     */
+    scrollBehavior: {
+      type: String,
+      default: 'smooth',
+    },
+    /**
+     * Include empty start and end slides (needed for correct margin collapsing with some styles).
+     */
+    emptySlides: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Options passed to the IntersectionObserver (determines when a slide is considered "intersecting").
+     */
+    observerOptions: {
+      type: Object,
+      default: () => ({ threshold: 0.1 })
+    },
+    /**
+     * Base class modifiers.
+     */
+    modifiers: [String, Array],
+  });
+
+  const { resolvedModifiers } = useModifiers({ props, baseClass: 'scroll-slider' });
+
+  const trackId = newId('ulu-scroll-slider-track');
+  const trackRef = ref(null);
+  const slideRefs = ref([]);
+  const intersectingIndexes = ref([]);
+
+  let observer = null;
+
+  const setSlideRef = (el, index) => {
+    if (el) {
+      slideRefs.value[index] = el;
+    }
+  };
+
+  onMounted(() => {
+    nextTick(() => {
+      // Setup IntersectionObserver to track visible slides
+      observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          const index = slideRefs.value.findIndex(el => el === entry.target);
+          if (index > -1) {
+            if (entry.isIntersecting) {
+              if (!intersectingIndexes.value.includes(index)) {
+                intersectingIndexes.value.push(index);
+              }
+            } else {
+              intersectingIndexes.value = intersectingIndexes.value.filter(i => i !== index);
+            }
+          }
+        });
+      }, {
+        ...props.observerOptions,
+        root: trackRef.value
+      });
+
+      slideRefs.value.forEach(el => {
+        if (el) observer.observe(el);
+      });
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (observer) {
+      observer.disconnect();
+    }
+  });
+</script>