@expcat/tigercat-vue 0.2.0 → 0.2.27

package/README.md

@@ -0,0 +1,50 @@
+# @expcat/tigercat-vue
+
+[![npm version](https://img.shields.io/npm/v/@expcat/tigercat-vue.svg)](https://www.npmjs.com/package/@expcat/tigercat-vue)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+Vue 3 UI components for [Tigercat](https://github.com/expcats/Tigercat) - A Tailwind CSS based component library.
+
+## 📖 Documentation
+
+**[Live Demo & Docs →](https://expcat.github.io/Tigercat/vue/)**
+
+## Installation
+
+```bash
+pnpm add @expcat/tigercat-vue
+# or
+npm install @expcat/tigercat-vue
+```
+
+**Requirements:** Vue ≥3.3, Tailwind CSS ≥3.4
+
+## Quick Start
+
+```vue
+<script setup>
+import { ConfigProvider, Button } from '@expcat/tigercat-vue'
+</script>
+
+<template>
+  <ConfigProvider>
+    <Button variant="primary">Click me</Button>
+  </ConfigProvider>
+</template>
+```
+
+## Components
+
+| Category       | Components                                                                            |
+| -------------- | ------------------------------------------------------------------------------------- |
+| **Basic**      | Alert, Avatar, Badge, Button, Code, Divider, Icon, Link, Tag, Text                    |
+| **Form**       | Input, Select, Checkbox, Radio, Switch, Slider, DatePicker, TimePicker, Upload, Form  |
+| **Layout**     | Card, Container, Grid (Row/Col), Layout, List, Descriptions, Skeleton, Space          |
+| **Navigation** | Menu, Tabs, Breadcrumb, Pagination, Steps, Dropdown, Tree                             |
+| **Feedback**   | Modal, Drawer, Message, Notification, Loading, Popconfirm, Popover, Tooltip, Progress |
+| **Data**       | Table, Timeline                                                                       |
+| **Charts**     | BarChart, LineChart, AreaChart, PieChart, DonutChart, RadarChart, ScatterChart        |
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)

package/dist/{chunk-U6JCAP2C.js → chunk-4NOUPGLA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkZFDUZQML_js = require('./chunk-ZFDUZQML.js');
+var chunkTSRGNIHX_js = require('./chunk-TSRGNIHX.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -142,7 +142,7 @@ var DonutChart = vue.defineComponent({
     const handleSliceHover = (datum, index) => {
       emit("slice-hover", datum, index);
     };
-    return () => vue.h(chunkZFDUZQML_js.PieChart, {
+    return () => vue.h(chunkTSRGNIHX_js.PieChart, {
       width: props.width,
       height: props.height,
       padding: props.padding,

package/dist/chunk-4QIOLPLB.mjs

@@ -0,0 +1,380 @@
+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, getCarouselArrowClasses, carouselPrevArrowPath, carouselNextArrowPath, getCarouselDotClasses, carouselSlideBaseClasses } from '@expcat/tigercat-core';
+
+// src/components/Carousel.ts
+var Carousel = defineComponent({
+  name: "TigerCarousel",
+  props: {
+    /**
+     * Whether to enable automatic slide switching
+     * @default false
+     */
+    autoplay: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Time interval for auto-play in milliseconds
+     * @default 3000
+     */
+    autoplaySpeed: {
+      type: Number,
+      default: 3e3
+    },
+    /**
+     * Whether to show navigation dots
+     * @default true
+     */
+    dots: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Position of navigation dots
+     * @default 'bottom'
+     */
+    dotPosition: {
+      type: String,
+      default: "bottom"
+    },
+    /**
+     * Transition effect type
+     * @default 'scroll'
+     */
+    effect: {
+      type: String,
+      default: "scroll"
+    },
+    /**
+     * Whether to show prev/next arrows
+     * @default false
+     */
+    arrows: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether to enable infinite loop
+     * @default true
+     */
+    infinite: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Transition animation duration in milliseconds
+     * @default 500
+     */
+    speed: {
+      type: Number,
+      default: 500
+    },
+    /**
+     * Initial slide index (0-based)
+     * @default 0
+     */
+    initialSlide: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Whether to pause autoplay on hover
+     * @default true
+     */
+    pauseOnHover: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether to pause autoplay on focus
+     * @default true
+     */
+    pauseOnFocus: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Custom styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["change", "before-change"],
+  setup(props, { slots, emit, attrs, expose }) {
+    const currentIndex = ref(props.initialSlide);
+    const isPaused = ref(false);
+    const slideCount = ref(0);
+    let autoplayTimer = null;
+    const containerClasses = computed(() => {
+      return classNames(getCarouselContainerClasses(props.className), coerceClassValue(attrs.class));
+    });
+    const trackClasses = computed(() => {
+      if (props.effect === "fade") {
+        return carouselTrackFadeClasses;
+      }
+      return carouselTrackScrollClasses;
+    });
+    const trackStyle = computed(() => {
+      if (props.effect === "scroll") {
+        return {
+          transform: getScrollTransform(currentIndex.value),
+          transitionDuration: `${props.speed}ms`
+        };
+      }
+      return {};
+    });
+    const getSlideClasses = (index) => {
+      const isActive = index === currentIndex.value;
+      if (props.effect === "fade") {
+        const positionClass = index === 0 ? "relative" : "absolute inset-0";
+        return classNames(
+          positionClass,
+          "w-full transition-opacity ease-in-out",
+          isActive ? "opacity-100 z-10" : "opacity-0 z-0"
+        );
+      }
+      return carouselSlideBaseClasses;
+    };
+    const getSlideStyle = () => {
+      return {
+        transitionDuration: `${props.speed}ms`
+      };
+    };
+    const dotsClasses = computed(() => {
+      return getCarouselDotsClasses(props.dotPosition);
+    });
+    const next = () => {
+      const nextIdx = getNextSlideIndex(currentIndex.value, slideCount.value, props.infinite);
+      if (nextIdx !== currentIndex.value) {
+        goTo(nextIdx);
+      }
+    };
+    const prev = () => {
+      const prevIdx = getPrevSlideIndex(currentIndex.value, slideCount.value, props.infinite);
+      if (prevIdx !== currentIndex.value) {
+        goTo(prevIdx);
+      }
+    };
+    const goTo = (index) => {
+      const clampedIndex = clampSlideIndex(index, slideCount.value);
+      if (clampedIndex === currentIndex.value) {
+        return;
+      }
+      emit("before-change", currentIndex.value, clampedIndex);
+      const prevIndex = currentIndex.value;
+      currentIndex.value = clampedIndex;
+      emit("change", clampedIndex, prevIndex);
+    };
+    const startAutoplay = () => {
+      if (!props.autoplay || autoplayTimer) return;
+      autoplayTimer = setInterval(() => {
+        if (!isPaused.value) {
+          next();
+        }
+      }, props.autoplaySpeed);
+    };
+    const stopAutoplay = () => {
+      if (autoplayTimer) {
+        clearInterval(autoplayTimer);
+        autoplayTimer = null;
+      }
+    };
+    const handleMouseEnter = () => {
+      if (props.pauseOnHover && props.autoplay) {
+        isPaused.value = true;
+      }
+    };
+    const handleMouseLeave = () => {
+      if (props.pauseOnHover && props.autoplay) {
+        isPaused.value = false;
+      }
+    };
+    const handleFocus = () => {
+      if (props.pauseOnFocus && props.autoplay) {
+        isPaused.value = true;
+      }
+    };
+    const handleBlur = () => {
+      if (props.pauseOnFocus && props.autoplay) {
+        isPaused.value = false;
+      }
+    };
+    const isPrevArrowDisabled = computed(
+      () => isPrevDisabled(currentIndex.value, slideCount.value, props.infinite)
+    );
+    const isNextArrowDisabled = computed(
+      () => isNextDisabled(currentIndex.value, slideCount.value, props.infinite)
+    );
+    watch(
+      () => props.autoplay,
+      (newVal) => {
+        if (newVal) {
+          startAutoplay();
+        } else {
+          stopAutoplay();
+        }
+      }
+    );
+    onMounted(() => {
+      if (props.autoplay) {
+        startAutoplay();
+      }
+    });
+    onUnmounted(() => {
+      stopAutoplay();
+    });
+    expose({
+      next,
+      prev,
+      goTo
+    });
+    return () => {
+      const defaultSlot = slots.default?.() || [];
+      const flattenSlots = (nodes) => {
+        return nodes.flatMap((node) => {
+          if (node.type === Fragment && Array.isArray(node.children)) {
+            return flattenSlots(node.children);
+          }
+          return node;
+        });
+      };
+      const slides = flattenSlots(defaultSlot).filter((child) => child.type !== Comment);
+      slideCount.value = slides.length;
+      const renderArrows = () => {
+        if (!props.arrows) return null;
+        const prevArrow = h(
+          "button",
+          {
+            type: "button",
+            class: getCarouselArrowClasses("prev", isPrevArrowDisabled.value),
+            onClick: prev,
+            disabled: isPrevArrowDisabled.value,
+            "aria-label": "Previous slide"
+          },
+          h(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: "w-6 h-6"
+            },
+            h("path", { d: carouselPrevArrowPath })
+          )
+        );
+        const nextArrow = h(
+          "button",
+          {
+            type: "button",
+            class: getCarouselArrowClasses("next", isNextArrowDisabled.value),
+            onClick: next,
+            disabled: isNextArrowDisabled.value,
+            "aria-label": "Next slide"
+          },
+          h(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: "w-6 h-6"
+            },
+            h("path", { d: carouselNextArrowPath })
+          )
+        );
+        return [prevArrow, nextArrow];
+      };
+      const renderDots = () => {
+        if (!props.dots || slides.length <= 1) return null;
+        const dots = slides.map(
+          (_, index) => h("button", {
+            type: "button",
+            key: index,
+            class: getCarouselDotClasses(index === currentIndex.value),
+            onClick: () => goTo(index),
+            "aria-label": `Go to slide ${index + 1}`,
+            "aria-current": index === currentIndex.value ? "true" : "false"
+          })
+        );
+        return h(
+          "div",
+          {
+            class: dotsClasses.value,
+            role: "tablist",
+            "aria-label": "Carousel navigation"
+          },
+          dots
+        );
+      };
+      const renderSlides = () => {
+        const slideElements = slides.map(
+          (slide, index) => h(
+            "div",
+            {
+              key: index,
+              class: getSlideClasses(index),
+              style: props.effect === "fade" ? getSlideStyle() : void 0,
+              role: "group",
+              "aria-roledescription": "slide",
+              "aria-label": `Slide ${index + 1} of ${slides.length}`,
+              "aria-hidden": index !== currentIndex.value
+            },
+            slide
+          )
+        );
+        if (props.effect === "fade") {
+          return h(
+            "div",
+            {
+              class: classNames(trackClasses.value, "h-full")
+            },
+            slideElements
+          );
+        }
+        return h(
+          "div",
+          {
+            class: trackClasses.value,
+            style: trackStyle.value
+          },
+          slideElements
+        );
+      };
+      return h(
+        "div",
+        {
+          class: containerClasses.value,
+          style: props.style,
+          role: "region",
+          "aria-roledescription": "carousel",
+          "aria-label": "Image carousel",
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave,
+          onFocusin: handleFocus,
+          onFocusout: handleBlur
+        },
+        [renderSlides(), renderArrows(), renderDots()]
+      );
+    };
+  }
+});
+var Carousel_default = Carousel;
+
+export { Carousel, Carousel_default };

package/dist/chunk-54IA7YWJ.js

@@ -0,0 +1,175 @@
+'use strict';
+
+var chunkNTXRWISS_js = require('./chunk-NTXRWISS.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var CollapsePanel = vue.defineComponent({
+  name: "TigerCollapsePanel",
+  props: {
+    /**
+     * Unique key for the panel (required)
+     */
+    panelKey: {
+      type: [String, Number],
+      required: true
+    },
+    /**
+     * Panel header/title
+     */
+    header: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Whether the panel is disabled
+     * @default false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether to show arrow icon
+     * @default true
+     */
+    showArrow: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Custom styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const collapseContext = vue.inject(chunkNTXRWISS_js.CollapseContextKey);
+    if (!collapseContext) {
+      throw new Error("CollapsePanel must be used within a Collapse component");
+    }
+    const isActive = vue.computed(() => {
+      return tigercatCore.isPanelActive(props.panelKey, collapseContext.activeKeys);
+    });
+    const panelClasses = vue.computed(() => {
+      return tigercatCore.classNames(
+        tigercatCore.getCollapsePanelClasses(collapseContext.ghost, props.className),
+        tigercatCore.coerceClassValue(attrs.class)
+      );
+    });
+    const headerClasses = vue.computed(() => {
+      return tigercatCore.getCollapsePanelHeaderClasses(isActive.value, props.disabled);
+    });
+    const iconClasses = vue.computed(() => {
+      return tigercatCore.getCollapseIconClasses(isActive.value, collapseContext.expandIconPosition);
+    });
+    const handleClick = () => {
+      if (!props.disabled) {
+        collapseContext.handlePanelClick(props.panelKey);
+      }
+    };
+    const handleKeydown = (event) => {
+      if (props.disabled) {
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        collapseContext.handlePanelClick(props.panelKey);
+      }
+    };
+    return () => {
+      const headerSlot = slots.header?.();
+      const extraSlot = slots.extra?.();
+      const arrowIcon = vue.h(
+        "svg",
+        {
+          class: iconClasses.value,
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        },
+        vue.h("path", {
+          d: "M6 12L10 8L6 4",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        })
+      );
+      const headerContent = [];
+      if (props.showArrow && collapseContext.expandIconPosition === "start") {
+        headerContent.push(arrowIcon);
+      }
+      headerContent.push(
+        vue.h(
+          "span",
+          {
+            class: tigercatCore.collapseHeaderTextClasses
+          },
+          headerSlot || props.header
+        )
+      );
+      if (extraSlot) {
+        headerContent.push(vue.h("span", { class: "ml-auto" }, extraSlot));
+      }
+      if (props.showArrow && collapseContext.expandIconPosition === "end") {
+        headerContent.push(arrowIcon);
+      }
+      const header = vue.h(
+        "div",
+        {
+          class: headerClasses.value,
+          role: "button",
+          tabindex: props.disabled ? -1 : 0,
+          "aria-expanded": isActive.value,
+          "aria-disabled": props.disabled,
+          onClick: handleClick,
+          onKeydown: handleKeydown
+        },
+        headerContent
+      );
+      const content = vue.h(
+        "div",
+        {
+          class: tigercatCore.collapsePanelContentWrapperClasses,
+          style: {
+            maxHeight: isActive.value ? "none" : "0",
+            opacity: isActive.value ? "1" : "0"
+          }
+        },
+        [
+          vue.h(
+            "div",
+            {
+              class: tigercatCore.collapsePanelContentBaseClasses
+            },
+            slots.default?.()
+          )
+        ]
+      );
+      return vue.h(
+        "div",
+        {
+          class: panelClasses.value,
+          style: props.style
+        },
+        [header, content]
+      );
+    };
+  }
+});
+var CollapsePanel_default = CollapsePanel;
+
+exports.CollapsePanel = CollapsePanel;
+exports.CollapsePanel_default = CollapsePanel_default;