@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-ZW2VXGO3.mjs

@@ -0,0 +1,186 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/BackTop.ts
+import { defineComponent, h, ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  createBackTopVisibilityController,
+  getBackTopLabels,
+  getBackTopOffsetStyle,
+  getBackTopPositionClasses,
+  getBackTopVisibilityClasses,
+  getScrollRootEventTarget,
+  mergeStyleValues,
+  mergeTigerLocale,
+  resolveScrollRoot,
+  scrollToTop,
+  backTopIconPath
+} from "@expcat/tigercat-core";
+var DefaultIcon = h(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    class: "h-5 w-5",
+    "aria-hidden": "true"
+  },
+  [h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: backTopIconPath })]
+);
+var BackTop = defineComponent({
+  name: "TigerBackTop",
+  inheritAttrs: false,
+  props: {
+    visibilityHeight: {
+      type: Number,
+      default: 400
+    },
+    target: {
+      type: [String, Object, Function],
+      default: void 0
+    },
+    duration: {
+      type: Number,
+      default: void 0
+    },
+    position: {
+      type: String,
+      default: "auto"
+    },
+    placement: {
+      type: String,
+      default: "bottom-right"
+    },
+    offset: {
+      type: [Number, String, Object],
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    labels: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(props, { slots, emit, attrs }) {
+    const visible = ref(false);
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labelSet = computed(() => getBackTopLabels(mergedLocale.value, props.labels));
+    const resolvedKey = computed(() => {
+      const root = resolveScrollRoot(props.target);
+      return root.isWindow ? "window" : root.target;
+    });
+    let visibilityController;
+    let boundTarget = null;
+    const unbind = () => {
+      if (boundTarget && visibilityController) {
+        boundTarget.removeEventListener("scroll", visibilityController.schedule);
+      }
+      visibilityController?.cancel();
+      visibilityController = void 0;
+      boundTarget = null;
+    };
+    const bind = () => {
+      unbind();
+      const root = resolveScrollRoot(props.target);
+      const eventTarget = getScrollRootEventTarget(root);
+      const scrollNode = root.target;
+      if (!eventTarget || !scrollNode) return;
+      visibilityController = createBackTopVisibilityController({
+        target: scrollNode,
+        getVisibilityHeight: () => props.visibilityHeight,
+        onChange: (nextVisible) => {
+          visible.value = nextVisible;
+        }
+      });
+      eventTarget.addEventListener("scroll", visibilityController.schedule, { passive: true });
+      boundTarget = eventTarget;
+      visibilityController.update();
+    };
+    const handleClick = (event) => {
+      const root = resolveScrollRoot(props.target);
+      if (!root.target) {
+        emit("click", event);
+        return;
+      }
+      scrollToTop(root.target, props.duration);
+      emit("click", event);
+    };
+    onMounted(() => {
+      bind();
+    });
+    watch(resolvedKey, () => {
+      bind();
+    });
+    watch(
+      () => props.visibilityHeight,
+      () => {
+        visibilityController?.update();
+      }
+    );
+    onBeforeUnmount(() => {
+      unbind();
+    });
+    const buttonClasses = computed(
+      () => classNames(
+        getBackTopPositionClasses({
+          position: props.position,
+          placement: props.placement
+        }),
+        getBackTopVisibilityClasses(visible.value),
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const mergedStyle = computed(
+      () => mergeStyleValues(
+        getBackTopOffsetStyle(props.position, props.placement, props.offset),
+        attrs.style,
+        props.style
+      )
+    );
+    return () => {
+      const hasSlot = Boolean(slots.default);
+      const content = hasSlot ? slots.default() : DefaultIcon;
+      const userLabel = attrs["aria-label"];
+      const ariaLabel = typeof userLabel === "string" && userLabel.trim() ? userLabel : hasSlot ? void 0 : labelSet.value.ariaLabel;
+      return h(
+        "button",
+        {
+          ...attrs,
+          type: "button",
+          class: buttonClasses.value,
+          style: mergedStyle.value,
+          "aria-label": ariaLabel,
+          "aria-hidden": visible.value ? void 0 : "true",
+          tabindex: visible.value ? 0 : -1,
+          onClick: handleClick
+        },
+        content
+      );
+    };
+  }
+});
+var BackTop_default = BackTop;
+
+export {
+  BackTop,
+  BackTop_default
+};

package/dist/{chunk-PMQSXEMT.mjs → chunk-ZWKDK6AF.mjs}

@@ -1,16 +1,16 @@
 import {
   useVueAnchoredOverlay
-} from "./chunk-Q7Y22OFX.mjs";
+} from "./chunk-Y63TRXZO.mjs";
 
-// src/utils/use-floating-popup.ts
+// src/utils/use-popup.ts
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 import {
-  buildTriggerHandlerMap,
+  buildOverlayTriggerHandlerMap,
   createFloatingHoverDelayController,
   restoreFocus
 } from "@expcat/tigercat-core";
-function useFloatingPopup(options) {
-  const { props, emit, multiTrigger = true } = options;
+function usePopup(options) {
+  const { props, emit, multiTrigger = true, arrowRef } = options;
   const internalVisible = ref(props.open ?? props.defaultOpen ?? false);
   const isControlled = computed(() => props.open !== void 0);
   watch(
@@ -24,6 +24,7 @@ function useFloatingPopup(options) {
   );
   const setVisible = (next) => {
     if (props.disabled && next) return;
+    if (next === currentVisible.value) return;
     if (!isControlled.value) internalVisible.value = next;
     emit("update:open", next);
     emit("open-change", next);
@@ -36,17 +37,13 @@ function useFloatingPopup(options) {
   const triggerRef = ref(null);
   const floatingRef = ref(null);
   const restoreTriggerFocus = () => {
-    const trigger = triggerRef.value;
-    const target = trigger?.querySelector(
-      'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
-    ) ?? trigger;
     window.setTimeout(() => {
-      restoreFocus(target, { preventScroll: true });
+      restoreFocus(triggerRef.value, { preventScroll: true });
     }, 0);
   };
   const closeAndRestoreFocus = () => {
     hoverController.closeNow();
-    restoreTriggerFocus();
+    if (effectiveTrigger.value !== "hover") restoreTriggerFocus();
   };
   const effectiveTrigger = computed(
     () => multiTrigger ? props.trigger ?? "click" : "click"
@@ -56,10 +53,13 @@ function useFloatingPopup(options) {
     referenceRef: triggerRef,
     floatingRef,
     containerRef,
-    placement: props.placement ?? "top",
-    offset: props.offset ?? 8,
-    dismissOnOutside: computed(() => effectiveTrigger.value === "click"),
+    placement: () => props.placement ?? "top",
+    offset: () => props.offset ?? 8,
+    dismissOnOutside: computed(
+      () => effectiveTrigger.value === "click" || effectiveTrigger.value === "hover"
+    ),
     dismissOnEscape: computed(() => effectiveTrigger.value !== "manual"),
+    arrowRef,
     onDismiss: (reason) => {
       if (reason === "escape") {
         closeAndRestoreFocus();
@@ -84,8 +84,12 @@ function useFloatingPopup(options) {
     hoverController.cancel();
     setVisible(true);
   };
-  const handleHide = () => {
+  const handleHide = (event) => {
     if (props.disabled) return;
+    const related = event?.relatedTarget;
+    if (related instanceof Node && (floatingRef.value?.contains(related) || triggerRef.value?.contains(related))) {
+      return;
+    }
     if (effectiveTrigger.value === "hover") {
       hoverController.leave();
       return;
@@ -114,7 +118,7 @@ function useFloatingPopup(options) {
     if (!multiTrigger) {
       return { onClick: handleToggle };
     }
-    return buildTriggerHandlerMap(
+    return buildOverlayTriggerHandlerMap(
       effectiveTrigger.value,
       { toggle: handleToggle, show: handleShow, hide: handleHide },
       "vue"
@@ -134,10 +138,12 @@ function useFloatingPopup(options) {
     positioned: overlay.positioned,
     overlayTarget: overlay.target,
     triggerHandlers,
-    closeAndRestoreFocus
+    closeAndRestoreFocus,
+    arrowX: overlay.arrowX,
+    arrowY: overlay.arrowY
   };
 }
 
 export {
-  useFloatingPopup
+  usePopup
 };

package/dist/components/ActivityFeed.d.mts

@@ -124,11 +124,11 @@ declare const ActivityFeed: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{}>, {
     locale: Partial<TigerLocale>;
+    style: Record<string, string | number>;
     loadingText: string;
     emptyText: string;
     labels: Partial<TigerLocaleActivityFeed>;
     className: string;
-    style: Record<string, string | number>;
     loading: boolean;
     groups: ActivityGroup[];
     groupBy: (item: ActivityItem) => string;

package/dist/components/ActivityFeed.mjs

@@ -1,18 +1,20 @@
 import {
   ActivityFeed,
   ActivityFeed_default
-} from "../chunk-RRNQL6MJ.mjs";
-import "../chunk-JQSIWPNM.mjs";
-import "../chunk-3MO7A4GU.mjs";
-import "../chunk-ZOP7PEKY.mjs";
-import "../chunk-342DH5CF.mjs";
-import "../chunk-NN6AINLG.mjs";
-import "../chunk-TC6ZPQFT.mjs";
-import "../chunk-ZFTRR3KW.mjs";
-import "../chunk-JHFM6IFO.mjs";
-import "../chunk-Q7Y22OFX.mjs";
-import "../chunk-UOJOJBEU.mjs";
-import "../chunk-TGXBCKOU.mjs";
+} from "../chunk-XWL3IP7Z.mjs";
+import "../chunk-K46SNCCE.mjs";
+import "../chunk-2HP6DX7Q.mjs";
+import "../chunk-OO27UB75.mjs";
+import "../chunk-7PLYHGMY.mjs";
+import "../chunk-I77GUQV4.mjs";
+import "../chunk-W4A6L2TC.mjs";
+import "../chunk-OGXSLKXD.mjs";
+import "../chunk-PVJDEAOW.mjs";
+import "../chunk-FEVDV3I6.mjs";
+import "../chunk-4KIZXFFG.mjs";
+import "../chunk-4QMHNTUU.mjs";
+import "../chunk-Y63TRXZO.mjs";
+import "../chunk-4GOTWNOO.mjs";
 export {
   ActivityFeed,
   ActivityFeed_default as default

package/dist/components/Affix.d.mts

@@ -1,14 +1,16 @@
 import * as vue from 'vue';
 import { PropType } from 'vue';
+import { ScrollRootInput } from '@expcat/tigercat-core';
 
 interface VueAffixProps {
     offsetTop?: number;
     offsetBottom?: number;
-    target?: string;
+    target?: ScrollRootInput;
     zIndex?: number;
     className?: string;
     style?: Record<string, string | number>;
 }
+type AffixProps = VueAffixProps;
 declare const Affix: vue.DefineComponent<vue.ExtractPropTypes<{
     offsetTop: {
         type: NumberConstructor;
@@ -19,7 +21,7 @@ declare const Affix: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
     target: {
-        type: StringConstructor;
+        type: PropType<ScrollRootInput>;
         default: undefined;
     };
     zIndex: {
@@ -46,7 +48,7 @@ declare const Affix: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
     target: {
-        type: StringConstructor;
+        type: PropType<ScrollRootInput>;
         default: undefined;
     };
     zIndex: {
@@ -64,12 +66,12 @@ declare const Affix: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
 }>, {
-    className: string;
     style: Record<string, string | number>;
-    target: string;
+    className: string;
     zIndex: number;
+    target: ScrollRootInput;
     offsetTop: number;
     offsetBottom: number;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { Affix, type VueAffixProps, Affix as default };
+export { Affix, type AffixProps, type VueAffixProps, Affix as default };

package/dist/components/Affix.mjs

@@ -1,7 +1,7 @@
 import {
   Affix,
   Affix_default
-} from "../chunk-3FPS7XVB.mjs";
+} from "../chunk-S3A7X7PP.mjs";
 export {
   Affix,
   Affix_default as default

package/dist/components/Alert.d.mts

@@ -1,8 +1,9 @@
 import * as vue from 'vue';
 import { PropType } from 'vue';
-import { AlertType, AlertSize } from '@expcat/tigercat-core';
+import { TigerLocale, AlertType, AlertSize } from '@expcat/tigercat-core';
 
 interface VueAlertProps {
+    locale?: Partial<TigerLocale>;
     type?: AlertType;
     size?: AlertSize;
     title?: string;
@@ -10,12 +11,19 @@ interface VueAlertProps {
     showIcon?: boolean;
     closable?: boolean;
     closeAriaLabel?: string;
+    duration?: number;
+    open?: boolean;
     banner?: boolean;
     showCountdown?: boolean;
     className?: string;
     style?: Record<string, string | number>;
 }
+type AlertProps = VueAlertProps;
 declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
+    locale: {
+        type: PropType<Partial<TigerLocale>>;
+        default: undefined;
+    };
     /**
      * Alert type (determines icon and color scheme)
      * @default 'info'
@@ -63,20 +71,28 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
         default: boolean;
     };
     /**
-     * Accessible label for the close button (when `closable` is true)
-     * @default 'Close alert'
+     * Accessible label for the close button (when `closable` is true).
+     * Defaults to ConfigProvider locale `alert.closeAriaLabel`.
      */
     closeAriaLabel: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     /**
      * Auto-close duration in milliseconds. 0 or undefined to disable.
+     * Independent of `closable`.
      */
     duration: {
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * When `false`, the alert is not rendered. Closing never hides internally.
+     */
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     /**
      * Additional CSS classes
      */
@@ -109,7 +125,11 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "close"[], "close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("close" | "update:open")[], "close" | "update:open", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    locale: {
+        type: PropType<Partial<TigerLocale>>;
+        default: undefined;
+    };
     /**
      * Alert type (determines icon and color scheme)
      * @default 'info'
@@ -157,20 +177,28 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
         default: boolean;
     };
     /**
-     * Accessible label for the close button (when `closable` is true)
-     * @default 'Close alert'
+     * Accessible label for the close button (when `closable` is true).
+     * Defaults to ConfigProvider locale `alert.closeAriaLabel`.
      */
     closeAriaLabel: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     /**
      * Auto-close duration in milliseconds. 0 or undefined to disable.
+     * Independent of `closable`.
      */
     duration: {
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * When `false`, the alert is not rendered. Closing never hides internally.
+     */
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     /**
      * Additional CSS classes
      */
@@ -203,13 +231,16 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
 }>, {
+    locale: Partial<TigerLocale>;
+    style: Record<string, string | number>;
+    title: string;
     type: AlertType;
     closeAriaLabel: string;
-    title: string;
     size: AlertSize;
     className: string;
-    style: Record<string, string | number>;
+    open: boolean;
     closable: boolean;
     duration: number;
     description: string;
@@ -218,4 +249,4 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
     showCountdown: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { Alert, type VueAlertProps, Alert as default };
+export { Alert, type AlertProps, type VueAlertProps, Alert as default };

package/dist/components/Alert.mjs

@@ -1,8 +1,9 @@
 import {
   Alert,
   Alert_default
-} from "../chunk-FISKCPTN.mjs";
-import "../chunk-2TNZ4JNT.mjs";
+} from "../chunk-L5ZHCFHX.mjs";
+import "../chunk-5VSSB4QF.mjs";
+import "../chunk-4GOTWNOO.mjs";
 export {
   Alert,
   Alert_default as default