tide-design-system 2.2.7 → 2.2.8

package/package.json

@@ -61,7 +61,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/components/TideCarousel.vue

@@ -6,6 +6,8 @@
   import { PRIORITY } from '@/types/Priority';
   import { CSS } from '@/types/Styles';
 
+  import type { Ref } from 'vue';
+
   type Props = {
     bleed?: number;
     isFloating?: boolean;
@@ -26,10 +28,16 @@
     title: undefined,
   });
 
-  const emit = defineEmits(['change']);
+  type Emits = {
+    (event: 'slideChange', slideIndex: number): void;
+    (event: 'slidesAddedToView', slidesInView: number[]): void;
+  };
 
-  const containerRef = ref();
+  const emit = defineEmits<Emits>();
 
+  const containerRef: Ref<HTMLDivElement | null> = ref(null);
+  const slideObserver = ref<IntersectionObserver | null>(null);
+  const slotObserver = ref<MutationObserver | null>(null);
   const contentRightEdge = ref();
   const contentWidth = ref();
   const currentSlide = ref(0);
@@ -42,6 +50,7 @@
 
   const updateContainerBleed = () => {
     if (props.bleed == undefined) return;
+    if (containerRef.value === null) return;
 
     if (isLastSlide.value && showButtons.value) {
       // Prevent gradient from bleeding off left edge in last position.
@@ -61,17 +70,21 @@
    * the frame.
    */
   const measureCurrentSlide = () => {
-    // Get left offset of each slide.
-    const slideOffsets = Array.from(containerRef.value.children).map((slide: any) => slide.offsetLeft);
+    const container = containerRef.value;
+    if (!container) return;
+
+    // Cast once, so TS knows these are HTMLElements
+    const slideOffsets = Array.from(container.children as HTMLCollectionOf<HTMLElement>).map(
+      (slide) => slide.offsetLeft
+    );
 
     if (slideOffsets.length === 0) return;
 
-    // Get closest offset to current scroll position.
-    const closestSlideOffset = slideOffsets.reduce((prev, curr) => {
-      return Math.abs(curr - containerRef.value.scrollLeft) < Math.abs(prev - containerRef.value.scrollLeft)
-        ? curr
-        : prev;
-    });
+    const scrollLeft = container.scrollLeft;
+
+    const closestSlideOffset = slideOffsets.reduce((prev, curr) =>
+      Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft) ? curr : prev
+    );
 
     currentSlide.value = slideOffsets.indexOf(closestSlideOffset);
 
@@ -79,6 +92,7 @@
   };
 
   const measureDom = () => {
+    if (containerRef.value === null) return;
     contentRightEdge.value = containerRef.value.scrollLeft + containerRef.value.clientWidth;
     contentWidth.value = containerRef.value.scrollWidth;
     frameWidth.value = containerRef.value.clientWidth;
@@ -97,17 +111,19 @@
   };
 
   const scrollToSlide = (slideIndex: number) => {
+    if (containerRef.value === null) return;
     containerRef.value.scrollTo({
       behavior: 'smooth',
-      left: containerRef.value.children[slideIndex].offsetLeft,
+      left: (containerRef.value.children[slideIndex] as HTMLElement).offsetLeft,
     });
   };
 
   const showNextSlide = () => {
+    if (containerRef.value === null) return;
     if (contentRightEdge.value > contentWidth.value) {
       containerRef.value.scrollTo({
         behavior: 'smooth',
-        left: contentWidth,
+        left: contentWidth.value,
       });
     } else if (!isLastSlide.value) {
       scrollToSlide(currentSlide.value + 1);
@@ -120,13 +136,52 @@
     }
   };
 
+  const observeSlides = () => {
+    const options = {
+      root: containerRef?.value,
+      rootMargin: '0px',
+      threshold: 0.5,
+    };
+
+    slideObserver.value = new IntersectionObserver((entries) => {
+      let slides: number[] = [];
+
+      entries.forEach((entry) => {
+        const slideIndex = Array.from(containerRef.value?.children ?? []).indexOf(entry.target);
+        if (entry.isIntersecting) {
+          slides.push(slideIndex);
+        }
+      });
+
+      if (slides.length > 0) emit('slidesAddedToView', slides);
+    }, options);
+    Array.from(containerRef.value?.children ?? []).forEach((child) => {
+      if (slideObserver.value) slideObserver.value.observe(child);
+    });
+  };
+
+  const observeSlot = () => {
+    const observerCallback = () => {
+      observeSlides();
+    };
+    slotObserver.value = new MutationObserver(observerCallback);
+    if (containerRef.value) slotObserver.value.observe(containerRef.value, { childList: true });
+  };
+
   onMounted(() => {
+    if (window) {
+      window.addEventListener('resize', measureDom);
+    }
+
     measureDom();
-    window.addEventListener('resize', measureDom);
+    observeSlides();
+    observeSlot();
   });
 
   onUnmounted(() => {
     window.removeEventListener('resize', measureDom);
+    slideObserver.value?.disconnect();
+    slotObserver.value?.disconnect();
   });
 
   onUpdated(() => {
@@ -134,7 +189,7 @@
   });
 
   watch(currentSlide, () => {
-    emit('change', currentSlide.value);
+    emit('slideChange', currentSlide.value);
   });
 </script>
 

package/src/stories/TideCarousel.stories.ts

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 
 import TideCard from '@/components/TideCard.vue';
 import TideCarousel from '@/components/TideCarousel.vue';
-import { argTypeBooleanUnrequired, change, disabledArgType, doSomething, lineBreak, tab } from '@/utilities/storybook';
+import { argTypeBooleanUnrequired, disabledArgType, doSomething, lineBreak, tab } from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
@@ -17,7 +17,8 @@ const formatSnippet = (code: string, context: StoryContext) => {
   if (args.isTouchscreen !== undefined) argsWithValues.push(`:is-touchscreen="${args.isTouchscreen}"`);
   if (args.subtitle !== '') argsWithValues.push(`subtitle="${args.subtitle}"`);
   if (args.title !== '') argsWithValues.push(`title="${args.title}"`);
-  if (args.handleChange) argsWithValues.push(`@change="${args.handleChange}"`);
+  if (args.handleSlideChange) argsWithValues.push(`@slide-change="${args.handleSlideChange}"`);
+  if (args.handleSlidesAddedToView) argsWithValues.push(`@slides-added-to-view="${args.handleSlidesAddedToView}"`);
 
   const slotContentMisc = args.misc === '' ? '' : `${tab}<template #misc>${args.misc}</template>${lineBreak}`;
 
@@ -46,17 +47,30 @@ const render = (args: any) => ({
   components: { TideCard, TideCarousel },
   methods: {
     doSomething,
-    handleChange: (index: number) => {
-      action(`Current slide ${index}`)(index);
+    handleSlideChange: (index: number) => {
+      action(`Current slide`)(index);
 
       try {
-        const callback = eval(args.handleChange);
+        const callback = eval(args.handleSlideChange);
 
         if (callback) {
           callback();
         }
       } catch {
-        alert('Please specify a valid handler in the "change" control.');
+        alert('Please specify a valid handler in the "slideChange" control.');
+      }
+    },
+    handleSlidesAddedToView: (slides: number[]) => {
+      action(`Slides added to view`)(slides);
+
+      try {
+        const callback = eval(args.handleSlidesAddedToView);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "slidesAddedToView" control.');
       }
     },
   },
@@ -64,7 +78,8 @@ const render = (args: any) => ({
   // prettier-ignore
   template:
   `<TideCarousel
-    @change="handleChange"
+    @slide-change="handleSlideChange"
+    @slides-added-to-view="handleSlidesAddedToView"
     class="tide-margin-x-1"
     v-bind="args"
   >
@@ -74,7 +89,7 @@ const render = (args: any) => ({
       class="tide-shrink-none tide-border-1 tide-border tide-padding-1"
       v-for="(_child, index) in new Array(12)"
     >
-      {{ args.default }}
+      {{ args.default.replace('#', index) }}
     </li>
   </TideCarousel>`,
   updated() {
@@ -96,7 +111,6 @@ export default {
         type: { summary: 'number' },
       },
     },
-    change: disabledArgType,
     default: {
       control: 'text',
       description: 'Dynamic card content',
@@ -105,14 +119,28 @@ export default {
         type: { summary: 'HTML' },
       },
     },
-    handleChange: {
-      ...change,
+    handleSlideChange: {
+      control: 'text',
+      description: 'JS code or function to execute on slideChange event',
+      isEmit: true,
+      name: 'slideChange',
       table: {
         category: 'Events',
         defaultValue: { summary: 'None' },
         type: { summary: '(currentSlide: number) => void' },
       },
     },
+    handleSlidesAddedToView: {
+      control: 'text',
+      description: 'JS code or function to execute on slidesAddedToView event',
+      isEmit: true,
+      name: 'slidesAddedToView',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: 'None' },
+        type: { summary: '(slides: number[]) => void' },
+      },
+    },
     isFloating: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether to display on-page or floating carousel',
@@ -150,6 +178,8 @@ export default {
         type: { summary: 'HTML' },
       },
     },
+    slideChange: disabledArgType,
+    slidesAddedToView: disabledArgType,
     subtitle: {
       control: 'text',
       description: 'Determines the text displayed to the right of the title',
@@ -169,8 +199,9 @@ export default {
   },
   args: {
     bleed: '',
-    default: 'Card',
-    handleChange: 'doSomething',
+    default: 'Card #',
+    handleSlideChange: 'doSomething',
+    handleSlidesAddedToView: 'doSomething',
     isFloating: undefined,
     isHideawayButtons: undefined,
     isTouchscreen: undefined,