@veritree/ui 0.58.2 → 0.60.0

package/index.js

@@ -76,6 +76,10 @@ import VTDisclosureIcon from './src/components/Disclosure/VTDisclosureIcon.vue';
 import VTDisclosureContent from './src/components/Disclosure/VTDisclosureContent.vue';
 import VTSkeleton from './src/components/Skeleton/VTSkeleton.vue';
 import VTSkeletonItem from './src/components/Skeleton/VTSkeletonItem.vue';
+import VTCarousel from './src/components/Carousel/VTCarousel.vue';
+import VTCarouselBackward from './src/components/Carousel/VTCarouselBackward.vue';
+import VTCarouselForward from './src/components/Carousel/VTCarouselForward.vue';
+import VTCarouselTracker from './src/components/Carousel/VTCarouselTracker.vue';
 
 export {
   VTAvatar,
@@ -156,4 +160,8 @@ export {
   VTSkeleton,
   VTSkeletonItem,
   VTChip,
+  VTCarousel,
+  VTCarouselBackward,
+  VTCarouselForward,
+  VTCarouselTracker
 };

package/nuxt.js

@@ -4,6 +4,7 @@ const components = [
   'src/components/Alert',
   'src/components/Avatar',
   'src/components/Button',
+  'src/components/Carousel',
   'src/components/Chip',
   'src/components/Drawer',
   'src/components/Dialog',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.58.2",
+  "version": "0.60.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Carousel/VTCarousel.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="relative overflow-hidden">
+    <slot />
+  </div>
+</template>
+
+<script>
+let windowResizeTimeout = null;
+
+export default {
+  name: 'VTCarousel',
+
+  provide() {
+    return {
+      apiCarousel: () => {
+        const registerElTracker = (elTracker) => {
+          if (!elTracker) return;
+          this.elTracker = elTracker;
+        };
+
+        return {
+          elTracker: this.elTracker,
+          hasContentOverflow: this.hasContentOverflow,
+          hasScrolledToLeftEnd: this.hasScrolledToLeftEnd,
+          hasScrolledToLeftStart: this.hasScrolledToLeftStart,
+          isLeftEndReached: this.isLeftEndReached,
+          isLeftStartReached: this.isLeftStartReached,
+          onMutateTracker: this.onMutateTracker,
+          registerElTracker,
+        };
+      },
+    };
+  },
+
+  data() {
+    return {
+      elTracker: null,
+      hasContentOverflow: false,
+      hasScrolledToLeftEnd: false,
+      hasScrolledToLeftStart: true,
+    };
+  },
+
+  mounted() {
+    this.addEvents();
+    this.hasContentOverflow = this.isContentOverflowing();
+  },
+
+  methods: {
+    addEvents() {
+      window.addEventListener('resize', this.onResizeWindow);
+    },
+
+    onResizeWindow() {
+      clearTimeout(windowResizeTimeout);
+
+      windowResizeTimeout = setTimeout(() => {
+        this.hasContentOverflow = this.isContentOverflowing();
+      }, 250);
+    },
+
+    onMutateTracker() {
+      this.hasContentOverflow = this.isContentOverflowing();
+    },
+
+    /**
+     * Checks if the scroll position is close to the left end of an element within a small margin.
+     *
+     * @returns {boolean} True if the scroll position is near the left end, otherwise false.
+     */
+    isLeftEndReached() {
+      const { offsetWidth, scrollLeft, scrollWidth } = this.elTracker;
+      const distanceToLeftEnd = Math.abs(
+        scrollWidth - offsetWidth - scrollLeft
+      );
+
+      // Check if the calculated distance is less than or equal to 10 pixels
+      this.hasScrolledToLeftEnd = distanceToLeftEnd <= 10;
+    },
+
+    /**
+     * Checks if the scroll position is at the leftmost starting point of an element.
+     *
+     * @returns {boolean} True if the scroll position is at the leftmost starting point, otherwise false.
+     */
+    isLeftStartReached() {
+      this.hasScrolledToLeftStart = this.elTracker.scrollLeft === 0;
+    },
+
+    /**
+     * Checks if the content inside the carousel overflows horizontally.
+     *
+     * @returns {boolean} True if the content overflows, false otherwise.
+     */
+    isContentOverflowing() {
+      return this.elTracker.offsetWidth !== this.elTracker.scrollWidth;
+    },
+  },
+};
+</script>

package/src/components/Carousel/VTCarouselBackward.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    :class="[visible ? 'pointer-events-none opacity-0' : 'opacity-100']"
+    class="transition-opacity duration-100"
+  >
+    <slot :scroll-backward="scrollBackward" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTCarouselPrev',
+
+  inject: ['apiCarousel'],
+
+  computed: {
+    carousel() {
+      return this.apiCarousel();
+    },
+
+    elTracker() {
+      return this.carousel.elTracker;
+    },
+
+    visible() {
+      return this.carousel.hasScrolledToLeftStart;
+    },
+  },
+
+  methods: {
+    scrollBackward() {
+      this.elTracker.scrollLeft -= 200;
+    },
+  },
+};
+</script>

package/src/components/Carousel/VTCarouselForward.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    :class="[visible ? 'opacity-100' : 'pointer-events-none opacity-0']"
+    class="transition-opacity duration-100"
+  >
+    <slot :scroll-forward="scrollForward" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTCarouselNext',
+
+  inject: ['apiCarousel'],
+
+  computed: {
+    carousel() {
+      return this.apiCarousel();
+    },
+
+    elTracker() {
+      return this.carousel.elTracker;
+    },
+
+    visible() {
+      return (
+        this.carousel.hasContentOverflow && !this.carousel.hasScrolledToLeftEnd
+      );
+    },
+  },
+
+  methods: {
+    scrollForward() {
+      this.elTracker.scrollLeft += 200;
+    },
+  },
+};
+</script>

package/src/components/Carousel/VTCarouselTracker.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="relative flex snap-start overflow-x-scroll">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTCarouselTracker',
+
+  inject: ['apiCarousel'],
+
+  data() {
+    return {
+      mutationObserver: null,
+    };
+  },
+
+  beforeDestroy() {
+    if (!this.$el) {
+      return;
+    }
+
+    this.$el.removeEventListener('scrollend', this.onScrollEnd);
+    this.mutationObserver.disconnect(this.$el);
+  },
+
+  mounted() {
+    this.registerElTracker();
+    this.registerMutationObserver();
+    this.addEventListeners();
+  },
+
+  methods: {
+    /**
+     * Registers the current element as a tracker with the parent carousel API.
+     */
+    registerElTracker() {
+      this.apiCarousel().registerElTracker(this.$el);
+    },
+
+    /**
+     * Sets up a MutationObserver to monitor changes within the current element
+     * and triggers the appropriate action in the parent carousel API when mutations occur.
+     */
+    registerMutationObserver() {
+      this.mutationObserver = new MutationObserver(() => {
+        this.apiCarousel().onMutateTracker();
+      });
+
+      this.mutationObserver.observe(this.$el, {
+        childList: true,
+      });
+    },
+
+    /**
+     * Adds an event listener to the current element to listen for the 'scrollend' event
+     * and invokes the 'onScrollEnd' method when the event is triggered.
+     */
+    addEventListeners() {
+      this.$el.addEventListener('scrollend', this.onScrollEnd);
+    },
+
+    onScrollEnd() {
+      this.apiCarousel().isLeftEndReached();
+      this.apiCarousel().isLeftStartReached();
+    },
+  },
+};
+</script>
+
+<style scoped type="postcss">
+div {
+  scrollbar-width: 0;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+</style>

package/src/components/Disclosure/VTDisclosureContent.vue

@@ -4,12 +4,19 @@
     :class="[
       headless
         ? 'details-content'
-        : 'overflow-hidden transition-[height] duration-300 ease-linear',
-      invisible ? 'absolute opacity-0' : 'h-[var(--height)]',
+        : 'grid transition-[grid-template-rows] duration-300 ease-linear',
+      headless
+        ? expanded
+          ? 'details-content--expanded'
+          : null
+        : expanded
+        ? 'grid-rows-[1fr]'
+        : 'grid-rows-[0fr]',
     ]"
-    :style="`--height: ${height};`"
   >
-    <slot></slot>
+    <div :class="[headless ? 'detail-content__overflow' : 'overflow-hidden']">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -39,15 +46,9 @@ export default {
     id() {
       return `disclosure-content-${this.idGroup}`;
     },
-
-    height() {
-      return this.expanded ? this.expandedHeight : 0;
-    },
   },
 
   mounted() {
-    this.handleVisibleHeight();
-
     const content = {
       id: this.id,
       idGroup: this.idGroup,
@@ -64,21 +65,6 @@ export default {
   },
 
   methods: {
-    handleVisibleHeight() {
-      // make panel position absolute and opacity 0,
-      // to have it fully opened but not visible
-      this.invisible = true;
-
-      setTimeout(() => {
-        // get computed height now since its fully opened
-        // this height will be used by a css custom property to enable the transition
-        this.expandedHeight = window.getComputedStyle(this.$el).height;
-
-        // make invisible false once the full height is set
-        this.invisible = false;
-      }, 500);
-    },
-
     expand() {
       this.expanded = true;
     },
@@ -86,7 +72,6 @@ export default {
     collapse() {
       this.expanded = false;
     },
-
     isVisible() {
       return this.expanded;
     },