@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/chunk-YYZBVHVC.mjs

@@ -0,0 +1,203 @@
+import { createStatusIcon } from './chunk-2TNZ4JNT.mjs';
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, h, Teleport } from 'vue';
+import { getTourPopoverPosition, getTourSpotlightStyle, tourCloseButtonClasses, closeIconPathD, tourTitleClasses, tourDescriptionClasses, tourIndicatorClasses, tourFooterClasses, classNames, tourPopoverClasses, getTourTargetRect } from '@expcat/tigercat-core';
+
+var Tour = defineComponent({
+  name: "TigerTour",
+  inheritAttrs: false,
+  props: {
+    steps: {
+      type: Array,
+      required: true
+    },
+    open: {
+      type: Boolean,
+      default: false
+    },
+    current: {
+      type: Number,
+      default: void 0
+    },
+    nextText: { type: String, default: "Next" },
+    prevText: { type: String, default: "Previous" },
+    finishText: { type: String, default: "Finish" },
+    closable: { type: Boolean, default: true },
+    showIndicators: { type: Boolean, default: true },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["update:open", "update:current", "close", "finish", "change"],
+  setup(props, { emit }) {
+    const internalStep = ref(0);
+    const currentStep = computed(() => props.current ?? internalStep.value);
+    const step = computed(() => props.steps[currentStep.value]);
+    const targetRect = ref();
+    const popoverRef = ref(null);
+    const updateRect = () => {
+      if (step.value?.target) {
+        targetRect.value = getTourTargetRect(step.value.target);
+      } else {
+        targetRect.value = void 0;
+      }
+    };
+    watch(
+      () => [props.open, currentStep.value],
+      () => {
+        if (props.open) updateRect();
+      }
+    );
+    onMounted(() => {
+      if (props.open) updateRect();
+    });
+    let resizeHandler;
+    onMounted(() => {
+      resizeHandler = () => {
+        if (props.open) updateRect();
+      };
+      window.addEventListener("resize", resizeHandler);
+      window.addEventListener("scroll", resizeHandler, true);
+    });
+    onBeforeUnmount(() => {
+      if (resizeHandler) {
+        window.removeEventListener("resize", resizeHandler);
+        window.removeEventListener("scroll", resizeHandler, true);
+      }
+    });
+    const goTo = (idx) => {
+      internalStep.value = idx;
+      emit("update:current", idx);
+      emit("change", idx);
+    };
+    const next = () => {
+      if (currentStep.value < props.steps.length - 1) {
+        goTo(currentStep.value + 1);
+      } else {
+        emit("finish");
+        emit("update:open", false);
+      }
+    };
+    const prev = () => {
+      if (currentStep.value > 0) {
+        goTo(currentStep.value - 1);
+      }
+    };
+    const close = () => {
+      emit("close");
+      emit("update:open", false);
+    };
+    return () => {
+      if (!props.open || !step.value) return null;
+      const placement = step.value.placement ?? "bottom";
+      const showMask = step.value.mask !== false;
+      const isLast = currentStep.value === props.steps.length - 1;
+      const isFirst = currentStep.value === 0;
+      let popoverStyle = {};
+      if (targetRect.value) {
+        const pos = getTourPopoverPosition(targetRect.value, 320, 160, placement);
+        popoverStyle = {
+          position: "absolute",
+          top: `${pos.top}px`,
+          left: `${pos.left}px`
+        };
+      } else {
+        popoverStyle = {
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)"
+        };
+      }
+      const children = [];
+      if (showMask && targetRect.value) {
+        children.push(
+          h("div", {
+            style: getTourSpotlightStyle(targetRect.value),
+            "aria-hidden": "true"
+          })
+        );
+      } else if (showMask) {
+        children.push(
+          h("div", {
+            class: "fixed inset-0 z-[1000] bg-black/45",
+            "aria-hidden": "true",
+            onClick: close
+          })
+        );
+      }
+      const popoverChildren = [];
+      if (props.closable) {
+        popoverChildren.push(
+          h(
+            "button",
+            {
+              class: tourCloseButtonClasses,
+              type: "button",
+              "aria-label": "Close tour",
+              onClick: close
+            },
+            createStatusIcon(closeIconPathD, "h-4 w-4")
+          )
+        );
+      }
+      if (step.value.title) {
+        popoverChildren.push(h("div", { class: tourTitleClasses }, step.value.title));
+      }
+      if (step.value.description) {
+        popoverChildren.push(h("div", { class: tourDescriptionClasses }, step.value.description));
+      }
+      const footerChildren = [];
+      if (props.showIndicators) {
+        footerChildren.push(
+          h(
+            "span",
+            { class: tourIndicatorClasses },
+            `${currentStep.value + 1} / ${props.steps.length}`
+          )
+        );
+      }
+      const buttons = [];
+      if (!isFirst) {
+        buttons.push(
+          h(
+            "button",
+            {
+              type: "button",
+              class: "px-3 py-1.5 text-sm rounded-md border border-[var(--tiger-border,#e5e7eb)] text-[var(--tiger-text,#111827)] hover:bg-[var(--tiger-surface-muted,#f9fafb)] transition-colors mr-2",
+              onClick: prev
+            },
+            props.prevText
+          )
+        );
+      }
+      buttons.push(
+        h(
+          "button",
+          {
+            type: "button",
+            class: "px-3 py-1.5 text-sm rounded-md bg-[var(--tiger-primary,#2563eb)] text-white hover:bg-[var(--tiger-primary-hover,#1d4ed8)] transition-colors",
+            onClick: next
+          },
+          isLast ? props.finishText : props.nextText
+        )
+      );
+      footerChildren.push(h("div", { class: "flex items-center" }, buttons));
+      popoverChildren.push(h("div", { class: tourFooterClasses }, footerChildren));
+      children.push(
+        h(
+          "div",
+          {
+            ref: popoverRef,
+            class: classNames(tourPopoverClasses, props.className),
+            style: popoverStyle,
+            role: "dialog",
+            "aria-modal": "true"
+          },
+          popoverChildren
+        )
+      );
+      return h(Teleport, { to: "body" }, children);
+    };
+  }
+});
+var Tour_default = Tour;
+
+export { Tour, Tour_default };

package/dist/{chunk-LLK2OK3K.mjs → chunk-Z2NMFYF4.mjs}

@@ -1,5 +1,5 @@
 import { Textarea } from './chunk-MKBIVETW.mjs';
-import { Button } from './chunk-D6MR5YRE.mjs';
+import { Button } from './chunk-M7JUNLA7.mjs';
 import { Tag } from './chunk-3G4VPV4D.mjs';
 import { Text } from './chunk-6V7XCCXN.mjs';
 import { Avatar } from './chunk-COCECPMG.mjs';

package/dist/{chunk-MMQ34S5M.mjs → chunk-ZUVR5UZL.mjs}

@@ -33,7 +33,7 @@ var init_ImagePreview = __esm({
       name: "TigerImagePreview",
       inheritAttrs: false,
       props: {
-        visible: { type: Boolean, default: false },
+        open: { type: Boolean, default: false },
         images: { type: Array, default: () => [] },
         currentIndex: { type: Number, default: 0 },
         zIndex: { type: Number, default: 1050 },
@@ -42,7 +42,7 @@ var init_ImagePreview = __esm({
         minScale: { type: Number, default: 0.25 },
         maxScale: { type: Number, default: 5 }
       },
-      emits: ["update:visible", "update:currentIndex", "scale-change"],
+      emits: ["update:open", "update:currentIndex", "scale-change"],
       setup(props, { emit }) {
         const scale = ref(1);
         const offsetX = ref(0);
@@ -62,8 +62,9 @@ var init_ImagePreview = __esm({
             resetTransform();
           }
         );
+        const isOpen = computed(() => props.open);
         watch(
-          () => props.visible,
+          () => isOpen.value,
           (val) => {
             if (val) {
               resetTransform();
@@ -76,7 +77,7 @@ var init_ImagePreview = __esm({
         );
         const navState = computed(() => getPreviewNavState(index.value, props.images.length));
         const handleClose = () => {
-          emit("update:visible", false);
+          emit("update:open", false);
         };
         const handleZoomIn = () => {
           scale.value = clampScale(scale.value + props.scaleStep, props.minScale, props.maxScale);
@@ -135,7 +136,7 @@ var init_ImagePreview = __esm({
           }
         };
         const handleKeyDown = (e) => {
-          if (!props.visible) return;
+          if (!isOpen.value) return;
           switch (e.key) {
             case "Escape":
               handleClose();
@@ -157,7 +158,7 @@ var init_ImagePreview = __esm({
         });
         const transform = computed(() => calculateTransform(scale.value, offsetX.value, offsetY.value));
         return () => {
-          if (!props.visible || !props.images.length) return null;
+          if (!isOpen.value || !props.images.length) return null;
           const currentSrc = props.images[index.value] || props.images[0];
           const mask = h("div", {
             class: imagePreviewMaskClasses,

package/dist/{chunk-37WD7WPC.mjs → chunk-ZXR4DAAO.mjs}

@@ -1,5 +1,5 @@
-import { TabsContextKey } from './chunk-U7MDGSCQ.mjs';
-import { defineComponent, inject, computed, h } from 'vue';
+import { TabsContextKey } from './chunk-HKYYO326.mjs';
+import { defineComponent, inject, computed, ref, watch, h } from 'vue';
 import { isKeyActive, getTabItemClasses, classNames, getTabPaneClasses, tabCloseButtonClasses, closeIconViewBox, closeIconPathD } from '@expcat/tigercat-core';
 
 var TabPane = defineComponent({
@@ -85,6 +85,10 @@ var TabPane = defineComponent({
     const isActive = computed(() => {
       return isKeyActive(props.tabKey, tabsContext.activeKey);
     });
+    const hasBeenActivated = ref(isActive.value);
+    watch(isActive, (val) => {
+      if (val) hasBeenActivated.value = true;
+    });
     const isClosable = computed(() => {
       return props.closable !== void 0 ? props.closable : tabsContext.closable && tabsContext.type === "editable-card";
     });
@@ -185,9 +189,9 @@ var TabPane = defineComponent({
             h("span", props.label),
             // Close button
             isClosable.value && h(
-              "button",
+              "span",
               {
-                type: "button",
+                role: "button",
                 class: tabCloseButtonClasses,
                 "aria-label": `Close ${String(props.label)}`,
                 tabindex: -1,
@@ -212,7 +216,7 @@ var TabPane = defineComponent({
           ]
         );
       }
-      const shouldRender = isActive.value || !tabsContext.destroyInactiveTabPane;
+      const shouldRender = tabsContext.lazy ? hasBeenActivated.value && (isActive.value || !tabsContext.destroyInactiveTabPane) : isActive.value || !tabsContext.destroyInactiveTabPane;
       if (!shouldRender) {
         return null;
       }

package/dist/components/ActivityFeed.d.mts

@@ -107,18 +107,18 @@ declare const ActivityFeed: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    style: Record<string, string | number>;
-    loading: boolean;
-    className: string;
-    emptyText: string;
     items: ActivityItem[];
     groups: ActivityGroup[];
     groupBy: (item: ActivityItem) => string;
     groupOrder: string[];
+    loading: boolean;
     loadingText: string;
+    emptyText: string;
     showAvatar: boolean;
     showTime: boolean;
     showGroupTitle: boolean;
+    className: string;
+    style: Record<string, string | number>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { ActivityFeed, type VueActivityFeedProps, ActivityFeed as default };

package/dist/components/ActivityFeed.d.ts

@@ -107,18 +107,18 @@ declare const ActivityFeed: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    style: Record<string, string | number>;
-    loading: boolean;
-    className: string;
-    emptyText: string;
     items: ActivityItem[];
     groups: ActivityGroup[];
     groupBy: (item: ActivityItem) => string;
     groupOrder: string[];
+    loading: boolean;
     loadingText: string;
+    emptyText: string;
     showAvatar: boolean;
     showTime: boolean;
     showGroupTitle: boolean;
+    className: string;
+    style: Record<string, string | number>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { ActivityFeed, type VueActivityFeedProps, ActivityFeed as default };

package/dist/components/ActivityFeed.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkEBTLMVDJ_js = require('../chunk-EBTLMVDJ.js');
+var chunkLLU76X6I_js = require('../chunk-LLU76X6I.js');
 require('../chunk-27T3QDSF.js');
 require('../chunk-ZED7TU62.js');
 require('../chunk-DN5GU5PC.js');
 require('../chunk-2KDSHEZT.js');
 require('../chunk-DUQ7Q2GO.js');
-require('../chunk-WEFQCJAG.js');
+require('../chunk-XGXGAK27.js');
 require('../chunk-WPIDP6IG.js');
 require('../chunk-PNKVD2UK.js');
 
@@ -16,9 +16,9 @@ require('../chunk-PNKVD2UK.js');
 
 Object.defineProperty(exports, "ActivityFeed", {
   enumerable: true,
-  get: function () { return chunkEBTLMVDJ_js.ActivityFeed; }
+  get: function () { return chunkLLU76X6I_js.ActivityFeed; }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () { return chunkEBTLMVDJ_js.ActivityFeed_default; }
+  get: function () { return chunkLLU76X6I_js.ActivityFeed_default; }
 });

package/dist/components/ActivityFeed.mjs

@@ -1,9 +1,9 @@
-export { ActivityFeed, ActivityFeed_default as default } from '../chunk-RVEEEDJQ.mjs';
+export { ActivityFeed, ActivityFeed_default as default } from '../chunk-P4X7GS2X.mjs';
 import '../chunk-LBGTABIU.mjs';
 import '../chunk-4YHOD7LT.mjs';
 import '../chunk-Q6OYCTQO.mjs';
 import '../chunk-3G4VPV4D.mjs';
 import '../chunk-6V7XCCXN.mjs';
-import '../chunk-YXN3YY5Y.mjs';
+import '../chunk-KOTSKHPQ.mjs';
 import '../chunk-COCECPMG.mjs';
 import '../chunk-53M2BTB5.mjs';

package/dist/components/Affix.d.mts

@@ -0,0 +1,75 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+interface VueAffixProps {
+    offsetTop?: number;
+    offsetBottom?: number;
+    target?: string;
+    zIndex?: number;
+    className?: string;
+    style?: Record<string, string | number>;
+}
+declare const Affix: vue.DefineComponent<vue.ExtractPropTypes<{
+    offsetTop: {
+        type: NumberConstructor;
+        default: number;
+    };
+    offsetBottom: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    target: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    style: {
+        type: PropType<Record<string, string | number>>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "change"[], "change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    offsetTop: {
+        type: NumberConstructor;
+        default: number;
+    };
+    offsetBottom: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    target: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    style: {
+        type: PropType<Record<string, string | number>>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    className: string;
+    style: Record<string, string | number>;
+    target: string;
+    zIndex: number;
+    offsetTop: number;
+    offsetBottom: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { Affix, type VueAffixProps, Affix as default };

package/dist/components/Affix.d.ts

@@ -0,0 +1,75 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+interface VueAffixProps {
+    offsetTop?: number;
+    offsetBottom?: number;
+    target?: string;
+    zIndex?: number;
+    className?: string;
+    style?: Record<string, string | number>;
+}
+declare const Affix: vue.DefineComponent<vue.ExtractPropTypes<{
+    offsetTop: {
+        type: NumberConstructor;
+        default: number;
+    };
+    offsetBottom: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    target: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    style: {
+        type: PropType<Record<string, string | number>>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "change"[], "change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    offsetTop: {
+        type: NumberConstructor;
+        default: number;
+    };
+    offsetBottom: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    target: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    style: {
+        type: PropType<Record<string, string | number>>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    className: string;
+    style: Record<string, string | number>;
+    target: string;
+    zIndex: number;
+    offsetTop: number;
+    offsetBottom: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { Affix, type VueAffixProps, Affix as default };

package/dist/components/Affix.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var chunkHRIKUP6R_js = require('../chunk-HRIKUP6R.js');
+require('../chunk-PNKVD2UK.js');
+
+
+
+Object.defineProperty(exports, "Affix", {
+  enumerable: true,
+  get: function () { return chunkHRIKUP6R_js.Affix; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return chunkHRIKUP6R_js.Affix_default; }
+});

package/dist/components/Affix.mjs

@@ -0,0 +1,2 @@
+export { Affix, Affix_default as default } from '../chunk-YUEBMBOH.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/Alert.d.mts

@@ -10,6 +10,8 @@ interface VueAlertProps {
     showIcon?: boolean;
     closable?: boolean;
     closeAriaLabel?: string;
+    banner?: boolean;
+    showCountdown?: boolean;
     className?: string;
     style?: Record<string, string | number>;
 }
@@ -68,6 +70,13 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Auto-close duration in milliseconds. 0 or undefined to disable.
+     */
+    duration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     /**
      * Additional CSS classes
      */
@@ -82,6 +91,22 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<Record<string, string | number>>;
         default: undefined;
     };
+    /**
+     * Whether to display as full-width banner
+     * @since 0.9.0
+     */
+    banner: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether to show countdown progress bar
+     * @since 0.9.0
+     */
+    showCountdown: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "close"[], "close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -139,6 +164,13 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Auto-close duration in milliseconds. 0 or undefined to disable.
+     */
+    duration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     /**
      * Additional CSS classes
      */
@@ -153,18 +185,37 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<Record<string, string | number>>;
         default: undefined;
     };
+    /**
+     * Whether to display as full-width banner
+     * @since 0.9.0
+     */
+    banner: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether to show countdown progress bar
+     * @since 0.9.0
+     */
+    showCountdown: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
-    type: AlertType;
-    style: Record<string, string | number>;
-    title: string;
     size: AlertSize;
     className: string;
+    style: Record<string, string | number>;
+    type: AlertType;
+    title: string;
     closable: boolean;
     closeAriaLabel: string;
     showIcon: boolean;
     description: string;
+    duration: number;
+    banner: boolean;
+    showCountdown: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { Alert, type VueAlertProps, Alert as default };