@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/{chunk-AAO2B46J.js → chunk-S6Q7TD6H.js}

@@ -1,23 +1,61 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
+var _chunk5F6P5Y4Kjs = require('./chunk-5F6P5Y4K.js');
 
 // src/components/List.ts
-var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var spinnerSvg = _tigercatcore.getSpinnerSVG.call(void 0, "spinner");
 var LoadingSpinner = () => {
-  return vue.h(
+  return _vue.h.call(void 0, 
     "svg",
     {
-      class: tigercatCore.getLoadingOverlaySpinnerClasses(),
+      class: _tigercatcore.getLoadingOverlaySpinnerClasses.call(void 0, ),
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
       viewBox: spinnerSvg.viewBox
     },
-    spinnerSvg.elements.map((el) => vue.h(el.type, tigercatCore.normalizeSvgAttrs(el.attrs)))
+    spinnerSvg.elements.map((el) => _vue.h.call(void 0, el.type, _tigercatcore.normalizeSvgAttrs.call(void 0, el.attrs)))
   );
 };
-var List = vue.defineComponent({
+var List = _vue.defineComponent.call(void 0, {
   name: "TigerList",
   inheritAttrs: false,
   props: {
@@ -83,6 +121,35 @@ var List = vue.defineComponent({
     grid: {
       type: Object
     },
+    /**
+     * Enable fixed-height virtual rendering via VirtualList.
+     * Virtual mode applies to the current paginated data window and is ignored for grid lists.
+     */
+    virtual: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Virtual viewport height in pixels.
+     */
+    virtualHeight: {
+      type: Number,
+      default: 400
+    },
+    /**
+     * Fixed virtual item height in pixels.
+     */
+    virtualItemHeight: {
+      type: Number,
+      default: 40
+    },
+    /**
+     * Number of extra virtual items to render above/below the viewport.
+     */
+    virtualOverscan: {
+      type: Number,
+      default: 5
+    },
     /**
      * Function to get item key
      */
@@ -121,19 +188,19 @@ var List = vue.defineComponent({
   },
   emits: ["item-click", "page-change", "reorder"],
   setup(props, { emit, slots, attrs }) {
-    const instance = vue.getCurrentInstance();
-    const hasItemClickListener = vue.computed(() => {
-      const vnodeProps = instance?.vnode.props || {};
+    const instance = _vue.getCurrentInstance.call(void 0, );
+    const hasItemClickListener = _vue.computed.call(void 0, () => {
+      const vnodeProps = _optionalChain([instance, 'optionalAccess', _ => _.vnode, 'access', _2 => _2.props]) || {};
       const handler = vnodeProps.onItemClick;
       return typeof handler === "function" || Array.isArray(handler);
     });
-    const currentPage = vue.ref(
+    const currentPage = _vue.ref.call(void 0, 
       props.pagination && typeof props.pagination === "object" ? props.pagination.current || 1 : 1
     );
-    const currentPageSize = vue.ref(
+    const currentPageSize = _vue.ref.call(void 0, 
       props.pagination && typeof props.pagination === "object" ? props.pagination.pageSize || 10 : 10
     );
-    const dragIndex = vue.ref(null);
+    const dragIndex = _vue.ref.call(void 0, null);
     function handleDragStart(index) {
       dragIndex.value = index;
     }
@@ -155,31 +222,31 @@ var List = vue.defineComponent({
     function handleDragEnd() {
       dragIndex.value = null;
     }
-    const paginatedData = vue.computed(() => {
+    const paginatedData = _vue.computed.call(void 0, () => {
       if (props.pagination === false) {
         return props.dataSource;
       }
-      return tigercatCore.paginateData(props.dataSource, currentPage.value, currentPageSize.value);
+      return _tigercatcore.paginateData.call(void 0, props.dataSource, currentPage.value, currentPageSize.value);
     });
-    const paginationInfo = vue.computed(() => {
+    const paginationInfo = _vue.computed.call(void 0, () => {
       if (props.pagination === false) {
         return null;
       }
       const total = props.dataSource.length;
-      return tigercatCore.calculatePagination(total, currentPage.value, currentPageSize.value);
+      return _tigercatcore.calculatePagination.call(void 0, total, currentPage.value, currentPageSize.value);
     });
-    const listClasses = vue.computed(() => {
-      return tigercatCore.classNames(
-        tigercatCore.getListClasses(props.bordered),
-        tigercatCore.listSizeClasses[props.size],
+    const listClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getListClasses.call(void 0, props.bordered),
+        _tigercatcore.listSizeClasses[props.size],
         props.className
       );
     });
-    const gridClasses = vue.computed(() => {
+    const gridClasses = _vue.computed.call(void 0, () => {
       if (!props.grid) return "";
-      return tigercatCore.classNames(
-        tigercatCore.listGridContainerClasses,
-        tigercatCore.getGridColumnClasses(
+      return _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.listGridContainerClasses,
+        _tigercatcore.getGridColumnClasses.call(void 0, 
           props.grid.column,
           props.grid.xs,
           props.grid.sm,
@@ -210,20 +277,20 @@ var List = vue.defineComponent({
     }
     function renderListHeader() {
       if (!slots.header) return null;
-      return vue.h(
+      return _vue.h.call(void 0, 
         "div",
         {
-          class: tigercatCore.getListHeaderFooterClasses(props.size, false)
+          class: _tigercatcore.getListHeaderFooterClasses.call(void 0, props.size, false)
         },
         slots.header()
       );
     }
     function renderListFooter() {
       if (!slots.footer) return null;
-      return vue.h(
+      return _vue.h.call(void 0, 
         "div",
         {
-          class: tigercatCore.getListHeaderFooterClasses(props.size, true)
+          class: _tigercatcore.getListHeaderFooterClasses.call(void 0, props.size, true)
         },
         slots.footer()
       );
@@ -240,7 +307,7 @@ var List = vue.defineComponent({
       } : {};
       return {
         key,
-        class: tigercatCore.classNames(
+        class: _tigercatcore.classNames.call(void 0, 
           itemClasses,
           clickable && "cursor-pointer",
           props.draggable && "cursor-grab"
@@ -258,7 +325,7 @@ var List = vue.defineComponent({
       };
     }
     function renderListItem(item, index) {
-      const itemClasses = tigercatCore.getListItemClasses(
+      const itemClasses = _tigercatcore.getListItemClasses.call(void 0, 
         props.size,
         props.itemLayout,
         props.split && props.bordered === "divided" && !props.grid,
@@ -266,14 +333,14 @@ var List = vue.defineComponent({
       );
       const attrs2 = getItemAttrs(item, index, itemClasses);
       if (slots.renderItem) {
-        return vue.h("div", attrs2, slots.renderItem({ item, index }));
+        return _vue.h.call(void 0, "div", attrs2, slots.renderItem({ item, index }));
       }
       const itemContent = [];
       const metaContent = [];
       if (item.avatar) {
         metaContent.push(
-          vue.h("div", { class: tigercatCore.listItemAvatarClasses }, [
-            typeof item.avatar === "string" ? vue.h("img", {
+          _vue.h.call(void 0, "div", { class: _tigercatcore.listItemAvatarClasses }, [
+            typeof item.avatar === "string" ? _vue.h.call(void 0, "img", {
               src: item.avatar,
               alt: item.title || "Avatar",
               class: "w-10 h-10 rounded-full object-cover"
@@ -283,33 +350,33 @@ var List = vue.defineComponent({
       }
       const contentChildren = [];
       if (item.title) {
-        contentChildren.push(vue.h("div", { class: tigercatCore.listItemTitleClasses }, item.title));
+        contentChildren.push(_vue.h.call(void 0, "div", { class: _tigercatcore.listItemTitleClasses }, item.title));
       }
       if (item.description) {
-        contentChildren.push(vue.h("div", { class: tigercatCore.listItemDescriptionClasses }, item.description));
+        contentChildren.push(_vue.h.call(void 0, "div", { class: _tigercatcore.listItemDescriptionClasses }, item.description));
       }
       if (contentChildren.length > 0) {
-        metaContent.push(vue.h("div", { class: tigercatCore.listItemContentClasses }, contentChildren));
+        metaContent.push(_vue.h.call(void 0, "div", { class: _tigercatcore.listItemContentClasses }, contentChildren));
       }
       if (metaContent.length > 0) {
-        itemContent.push(vue.h("div", { class: tigercatCore.listItemMetaClasses }, metaContent));
+        itemContent.push(_vue.h.call(void 0, "div", { class: _tigercatcore.listItemMetaClasses }, metaContent));
       }
       if (item.extra) {
         itemContent.push(
-          vue.h("div", { class: tigercatCore.listItemExtraClasses }, item.extra)
+          _vue.h.call(void 0, "div", { class: _tigercatcore.listItemExtraClasses }, item.extra)
         );
       }
-      return vue.h("div", attrs2, itemContent);
+      return _vue.h.call(void 0, "div", attrs2, itemContent);
     }
     function renderListItems() {
       if (props.loading) {
         return null;
       }
       if (paginatedData.value.length === 0) {
-        return vue.h(
+        return _vue.h.call(void 0, 
           "div",
           {
-            class: tigercatCore.listEmptyStateClasses,
+            class: _tigercatcore.listEmptyStateClasses,
             role: "status",
             "aria-live": "polite"
           },
@@ -319,7 +386,7 @@ var List = vue.defineComponent({
       const items = paginatedData.value.map((item, index) => renderListItem(item, index));
       if (props.grid) {
         const gutter = props.grid.gutter;
-        return vue.h(
+        return _vue.h.call(void 0, 
           "div",
           {
             class: gridClasses.value,
@@ -328,6 +395,23 @@ var List = vue.defineComponent({
           items
         );
       }
+      if (props.virtual) {
+        return _vue.h.call(void 0, 
+          _chunk5F6P5Y4Kjs.VirtualList,
+          {
+            itemCount: paginatedData.value.length,
+            itemHeight: props.virtualItemHeight,
+            height: props.virtualHeight,
+            overscan: props.virtualOverscan
+          },
+          {
+            default: ({ index }) => {
+              const item = paginatedData.value[index];
+              return item ? renderListItem(item, index) : null;
+            }
+          }
+        );
+      }
       return items;
     }
     function renderPagination() {
@@ -337,50 +421,50 @@ var List = vue.defineComponent({
       const { totalPages, startIndex, endIndex, hasNext, hasPrev } = paginationInfo.value;
       const total = props.dataSource.length;
       const paginationConfig = props.pagination;
-      return vue.h("div", { class: tigercatCore.getSimplePaginationContainerClasses() }, [
+      return _vue.h.call(void 0, "div", { class: _tigercatcore.getSimplePaginationContainerClasses.call(void 0, ) }, [
         // Total info
-        paginationConfig.showTotal !== false && vue.h(
+        paginationConfig.showTotal !== false && _vue.h.call(void 0, 
           "div",
-          { class: tigercatCore.getSimplePaginationTotalClasses() },
+          { class: _tigercatcore.getSimplePaginationTotalClasses.call(void 0, ) },
           paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} items`
         ),
         // Pagination controls
-        vue.h("div", { class: tigercatCore.getSimplePaginationControlsClasses() }, [
+        _vue.h.call(void 0, "div", { class: _tigercatcore.getSimplePaginationControlsClasses.call(void 0, ) }, [
           // Page size selector
-          paginationConfig.showSizeChanger !== false && vue.h(
+          paginationConfig.showSizeChanger !== false && _vue.h.call(void 0, 
             "select",
             {
-              class: tigercatCore.getSimplePaginationSelectClasses(),
+              class: _tigercatcore.getSimplePaginationSelectClasses.call(void 0, ),
               value: currentPageSize.value,
               onChange: (e) => handlePageSizeChange(Number(e.target.value))
             },
             (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map(
-              (size) => vue.h("option", { value: size }, `${size} / page`)
+              (size) => _vue.h.call(void 0, "option", { value: size }, `${size} / page`)
             )
           ),
           // Page buttons
-          vue.h("div", { class: tigercatCore.getSimplePaginationButtonsWrapperClasses() }, [
+          _vue.h.call(void 0, "div", { class: _tigercatcore.getSimplePaginationButtonsWrapperClasses.call(void 0, ) }, [
             // Previous button
-            vue.h(
+            _vue.h.call(void 0, 
               "button",
               {
-                class: tigercatCore.getSimplePaginationButtonClasses(!hasPrev),
+                class: _tigercatcore.getSimplePaginationButtonClasses.call(void 0, !hasPrev),
                 disabled: !hasPrev,
                 onClick: () => handlePageChange(currentPage.value - 1)
               },
               "Previous"
             ),
             // Current page indicator
-            vue.h(
+            _vue.h.call(void 0, 
               "span",
-              { class: tigercatCore.getSimplePaginationPageIndicatorClasses() },
+              { class: _tigercatcore.getSimplePaginationPageIndicatorClasses.call(void 0, ) },
               `Page ${currentPage.value} of ${totalPages}`
             ),
             // Next button
-            vue.h(
+            _vue.h.call(void 0, 
               "button",
               {
-                class: tigercatCore.getSimplePaginationButtonClasses(!hasNext),
+                class: _tigercatcore.getSimplePaginationButtonClasses.call(void 0, !hasNext),
                 disabled: !hasNext,
                 onClick: () => handlePageChange(currentPage.value + 1)
               },
@@ -394,24 +478,24 @@ var List = vue.defineComponent({
       const attrsRecord = attrs;
       const attrsClass = attrsRecord.class;
       const attrsStyle = attrsRecord.style;
-      return vue.h("div", { class: tigercatCore.listWrapperClasses }, [
-        vue.h("div", { class: "relative" }, [
-          vue.h(
+      return _vue.h.call(void 0, "div", { class: _tigercatcore.listWrapperClasses }, [
+        _vue.h.call(void 0, "div", { class: "relative" }, [
+          _vue.h.call(void 0, 
             "div",
             {
               ...attrs,
-              class: tigercatCore.classNames(listClasses.value, tigercatCore.coerceClassValue(attrsClass)),
-              style: tigercatCore.mergeStyleValues(attrsStyle, props.style),
+              class: _tigercatcore.classNames.call(void 0, listClasses.value, _tigercatcore.coerceClassValue.call(void 0, attrsClass)),
+              style: _tigercatcore.mergeStyleValues.call(void 0, attrsStyle, props.style),
               role: "list",
               "aria-busy": props.loading || void 0
             },
             [renderListHeader(), renderListItems(), renderListFooter()]
           ),
           // Loading overlay
-          props.loading && vue.h(
+          props.loading && _vue.h.call(void 0, 
             "div",
             {
-              class: tigercatCore.listLoadingOverlayClasses,
+              class: _tigercatcore.listLoadingOverlayClasses,
               role: "status",
               "aria-live": "polite"
             },
@@ -426,5 +510,7 @@ var List = vue.defineComponent({
 });
 var List_default = List;
 
-exports.List = List;
-exports.List_default = List_default;
+
+
+
+exports.List = List; exports.List_default = List_default;

package/dist/{chunk-FDYZ7NTQ.mjs → chunk-SC3WTLKG.mjs}

@@ -1,7 +1,37 @@
-import { defineComponent, ref, computed, watch, onMounted, onUnmounted, Comment, h, Fragment } from 'vue';
-import { classNames, getCarouselContainerClasses, coerceClassValue, carouselTrackFadeClasses, carouselTrackScrollClasses, getScrollTransform, getCarouselDotsClasses, isPrevDisabled, isNextDisabled, clampSlideIndex, getPrevSlideIndex, getNextSlideIndex, getCarouselDotClasses, carouselSlideBaseClasses, getCarouselArrowClasses, carouselPrevArrowPath, carouselNextArrowPath } from '@expcat/tigercat-core';
-
 // src/components/Carousel.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  watch,
+  onMounted,
+  onUnmounted,
+  h,
+  Comment,
+  Fragment
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getCarouselContainerClasses,
+  carouselTrackScrollClasses,
+  carouselTrackFadeClasses,
+  carouselSlideBaseClasses,
+  getCarouselDotsClasses,
+  getCarouselDotClasses,
+  getCarouselArrowClasses,
+  getNextSlideIndex,
+  getPrevSlideIndex,
+  isNextDisabled,
+  isPrevDisabled,
+  clampSlideIndex,
+  getScrollTransform,
+  getCarouselTouchPoint,
+  resolveCarouselSwipeDirection,
+  createCarouselAutoplayController,
+  carouselPrevArrowPath,
+  carouselNextArrowPath
+} from "@expcat/tigercat-core";
 var Carousel = defineComponent({
   name: "TigerCarousel",
   props: {
@@ -113,7 +143,10 @@ var Carousel = defineComponent({
     const currentIndex = ref(props.initialSlide);
     const isPaused = ref(false);
     const slideCount = ref(0);
-    let autoplayTimer = null;
+    const containerRef = ref(null);
+    let autoplayController = null;
+    let touchStartPoint = null;
+    let touchCurrentPoint = null;
     const containerClasses = computed(() => {
       return classNames(getCarouselContainerClasses(props.className), coerceClassValue(attrs.class));
     });
@@ -173,19 +206,52 @@ var Carousel = defineComponent({
       emit("change", clampedIndex, prevIndex);
     };
     const startAutoplay = () => {
-      if (!props.autoplay || autoplayTimer) return;
-      autoplayTimer = setInterval(() => {
-        if (!isPaused.value) {
-          next();
-        }
-      }, props.autoplaySpeed);
+      if (!props.autoplay || isPaused.value || autoplayController) return;
+      autoplayController = createCarouselAutoplayController({
+        interval: props.autoplaySpeed,
+        onAdvance: next
+      });
+      autoplayController.start();
     };
     const stopAutoplay = () => {
-      if (autoplayTimer) {
-        clearInterval(autoplayTimer);
-        autoplayTimer = null;
+      autoplayController?.stop();
+      autoplayController = null;
+    };
+    const syncAutoplay = () => {
+      stopAutoplay();
+      startAutoplay();
+    };
+    const resetTouchGesture = () => {
+      touchStartPoint = null;
+      touchCurrentPoint = null;
+    };
+    const handleTouchStart = (event) => {
+      const point = getCarouselTouchPoint(event.touches);
+      touchStartPoint = point;
+      touchCurrentPoint = point;
+    };
+    const handleTouchMove = (event) => {
+      if (!touchStartPoint) return;
+      const point = getCarouselTouchPoint(event.touches);
+      if (point) {
+        touchCurrentPoint = point;
       }
     };
+    const handleTouchEnd = (event) => {
+      const direction = resolveCarouselSwipeDirection(
+        touchStartPoint,
+        getCarouselTouchPoint(event.changedTouches) ?? touchCurrentPoint
+      );
+      resetTouchGesture();
+      if (direction === "next") {
+        next();
+      } else if (direction === "prev") {
+        prev();
+      }
+    };
+    const handleTouchCancel = () => {
+      resetTouchGesture();
+    };
     const handleMouseEnter = () => {
       if (props.pauseOnHover && props.autoplay) {
         isPaused.value = true;
@@ -212,23 +278,23 @@ var Carousel = defineComponent({
     const isNextArrowDisabled = computed(
       () => isNextDisabled(currentIndex.value, slideCount.value, props.infinite)
     );
-    watch(
-      () => props.autoplay,
-      (newVal) => {
-        if (newVal) {
-          startAutoplay();
-        } else {
-          stopAutoplay();
-        }
-      }
-    );
+    watch([() => props.autoplay, () => props.autoplaySpeed, isPaused], syncAutoplay);
     onMounted(() => {
       if (props.autoplay) {
         startAutoplay();
       }
+      containerRef.value?.addEventListener("touchstart", handleTouchStart, { passive: true });
+      containerRef.value?.addEventListener("touchmove", handleTouchMove, { passive: true });
+      containerRef.value?.addEventListener("touchend", handleTouchEnd, { passive: true });
+      containerRef.value?.addEventListener("touchcancel", handleTouchCancel, { passive: true });
     });
     onUnmounted(() => {
       stopAutoplay();
+      resetTouchGesture();
+      containerRef.value?.removeEventListener("touchstart", handleTouchStart);
+      containerRef.value?.removeEventListener("touchmove", handleTouchMove);
+      containerRef.value?.removeEventListener("touchend", handleTouchEnd);
+      containerRef.value?.removeEventListener("touchcancel", handleTouchCancel);
     });
     expose({
       next,
@@ -337,6 +403,7 @@ var Carousel = defineComponent({
       return h(
         "div",
         {
+          ref: containerRef,
           class: containerClasses.value,
           style: props.style,
           role: "region",
@@ -354,4 +421,7 @@ var Carousel = defineComponent({
 });
 var Carousel_default = Carousel;
 
-export { Carousel, Carousel_default };
+export {
+  Carousel,
+  Carousel_default
+};