@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/chunk-YUEBMBOH.mjs

@@ -1,103 +0,0 @@
-import { defineComponent, ref, onMounted, onBeforeUnmount, h } from 'vue';
-import { resolveAffixTarget, mergeStyleValues, classNames, coerceClassValue, calculateAffixState } from '@expcat/tigercat-core';
-
-// src/components/Affix.ts
-var Affix = defineComponent({
-  name: "TigerAffix",
-  inheritAttrs: false,
-  props: {
-    offsetTop: { type: Number, default: 0 },
-    offsetBottom: { type: Number, default: void 0 },
-    target: { type: String, default: void 0 },
-    zIndex: { type: Number, default: 10 },
-    className: { type: String, default: void 0 },
-    style: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["change"],
-  setup(props, { slots, emit, attrs }) {
-    const wrapperRef = ref(null);
-    const placeholderRef = ref(null);
-    const state = ref({ affixed: false, style: {} });
-    const originalRect = ref(
-      null
-    );
-    const update = () => {
-      if (!wrapperRef.value) return;
-      const el = state.value.affixed && placeholderRef.value ? placeholderRef.value : wrapperRef.value;
-      const rect = el.getBoundingClientRect();
-      if (!originalRect.value || !state.value.affixed) {
-        originalRect.value = {
-          top: rect.top,
-          left: rect.left,
-          width: rect.width,
-          height: rect.height
-        };
-      }
-      const resolved = resolveAffixTarget(props.target);
-      const containerRect = resolved.getRect();
-      const newState = calculateAffixState(
-        originalRect.value,
-        containerRect,
-        props.offsetBottom !== void 0 ? void 0 : props.offsetTop,
-        props.offsetBottom,
-        props.zIndex
-      );
-      if (newState.affixed !== state.value.affixed) {
-        emit("change", newState.affixed);
-      }
-      state.value = newState;
-    };
-    let scrollTarget = null;
-    onMounted(() => {
-      const resolved = resolveAffixTarget(props.target);
-      scrollTarget = resolved.element;
-      scrollTarget.addEventListener("scroll", update, { passive: true });
-      window.addEventListener("resize", update, { passive: true });
-      update();
-    });
-    onBeforeUnmount(() => {
-      scrollTarget?.removeEventListener("scroll", update);
-      window.removeEventListener("resize", update);
-    });
-    return () => {
-      const attrsRecord = attrs;
-      const children = slots.default?.();
-      if (state.value.affixed) {
-        return h("div", { ref: placeholderRef }, [
-          h("div", {
-            style: {
-              width: `${originalRect.value?.width ?? 0}px`,
-              height: `${originalRect.value?.height ?? 0}px`
-            }
-          }),
-          h(
-            "div",
-            {
-              ref: wrapperRef,
-              ...attrs,
-              class: classNames(props.className, coerceClassValue(attrsRecord.class)),
-              style: mergeStyleValues(state.value.style, props.style)
-            },
-            children
-          )
-        ]);
-      }
-      return h(
-        "div",
-        {
-          ref: wrapperRef,
-          ...attrs,
-          class: classNames(props.className, coerceClassValue(attrsRecord.class)),
-          style: mergeStyleValues(attrsRecord.style, props.style)
-        },
-        children
-      );
-    };
-  }
-});
-var Affix_default = Affix;
-
-export { Affix, Affix_default };

package/dist/chunk-ZUVR5UZL.mjs

@@ -1,264 +0,0 @@
-import { __export, __esm } from './chunk-53M2BTB5.mjs';
-import { defineComponent, ref, watch, computed, onMounted, onBeforeUnmount, h, Teleport } from 'vue';
-import { getPreviewNavState, calculateTransform, imagePreviewMaskClasses, imagePreviewImgClasses, imagePreviewCloseBtnClasses, previewCloseIconPath, imagePreviewToolbarClasses, imagePreviewToolbarBtnClasses, zoomOutIconPath, resetIconPath, zoomInIconPath, imagePreviewCounterClasses, classNames, imagePreviewNavBtnClasses, prevIconPath, nextIconPath, imagePreviewWrapperClasses, clampScale } from '@expcat/tigercat-core';
-
-// src/components/ImagePreview.ts
-var ImagePreview_exports = {};
-__export(ImagePreview_exports, {
-  ImagePreview: () => ImagePreview,
-  default: () => ImagePreview_default
-});
-var svgIcon, ImagePreview, ImagePreview_default;
-var init_ImagePreview = __esm({
-  "src/components/ImagePreview.ts"() {
-    svgIcon = (d, cls = "w-5 h-5") => h(
-      "svg",
-      {
-        class: cls,
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor"
-      },
-      [
-        h("path", {
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round",
-          "stroke-width": "2",
-          d
-        })
-      ]
-    );
-    ImagePreview = defineComponent({
-      name: "TigerImagePreview",
-      inheritAttrs: false,
-      props: {
-        open: { type: Boolean, default: false },
-        images: { type: Array, default: () => [] },
-        currentIndex: { type: Number, default: 0 },
-        zIndex: { type: Number, default: 1050 },
-        maskClosable: { type: Boolean, default: true },
-        scaleStep: { type: Number, default: 0.5 },
-        minScale: { type: Number, default: 0.25 },
-        maxScale: { type: Number, default: 5 }
-      },
-      emits: ["update:open", "update:currentIndex", "scale-change"],
-      setup(props, { emit }) {
-        const scale = ref(1);
-        const offsetX = ref(0);
-        const offsetY = ref(0);
-        const index = ref(props.currentIndex);
-        const dragging = ref(false);
-        const dragStart = ref({ x: 0, y: 0, ox: 0, oy: 0 });
-        const resetTransform = () => {
-          scale.value = 1;
-          offsetX.value = 0;
-          offsetY.value = 0;
-        };
-        watch(
-          () => props.currentIndex,
-          (val) => {
-            index.value = val;
-            resetTransform();
-          }
-        );
-        const isOpen = computed(() => props.open);
-        watch(
-          () => isOpen.value,
-          (val) => {
-            if (val) {
-              resetTransform();
-              index.value = props.currentIndex;
-              document.body.style.overflow = "hidden";
-            } else {
-              document.body.style.overflow = "";
-            }
-          }
-        );
-        const navState = computed(() => getPreviewNavState(index.value, props.images.length));
-        const handleClose = () => {
-          emit("update:open", false);
-        };
-        const handleZoomIn = () => {
-          scale.value = clampScale(scale.value + props.scaleStep, props.minScale, props.maxScale);
-          emit("scale-change", scale.value);
-        };
-        const handleZoomOut = () => {
-          scale.value = clampScale(scale.value - props.scaleStep, props.minScale, props.maxScale);
-          emit("scale-change", scale.value);
-        };
-        const handleReset = () => {
-          resetTransform();
-          emit("scale-change", 1);
-        };
-        const handlePrev = () => {
-          if (navState.value.hasPrev) {
-            index.value--;
-            resetTransform();
-            emit("update:currentIndex", index.value);
-          }
-        };
-        const handleNext = () => {
-          if (navState.value.hasNext) {
-            index.value++;
-            resetTransform();
-            emit("update:currentIndex", index.value);
-          }
-        };
-        const handleWheel = (e) => {
-          e.preventDefault();
-          const delta = e.deltaY > 0 ? -props.scaleStep : props.scaleStep;
-          scale.value = clampScale(scale.value + delta, props.minScale, props.maxScale);
-          emit("scale-change", scale.value);
-        };
-        const handleMouseDown = (e) => {
-          if (e.button !== 0) return;
-          e.preventDefault();
-          dragging.value = true;
-          dragStart.value = {
-            x: e.clientX,
-            y: e.clientY,
-            ox: offsetX.value,
-            oy: offsetY.value
-          };
-        };
-        const handleMouseMove = (e) => {
-          if (!dragging.value) return;
-          offsetX.value = dragStart.value.ox + (e.clientX - dragStart.value.x);
-          offsetY.value = dragStart.value.oy + (e.clientY - dragStart.value.y);
-        };
-        const handleMouseUp = () => {
-          dragging.value = false;
-        };
-        const handleMaskClick = (e) => {
-          if (props.maskClosable && e.target === e.currentTarget) {
-            handleClose();
-          }
-        };
-        const handleKeyDown = (e) => {
-          if (!isOpen.value) return;
-          switch (e.key) {
-            case "Escape":
-              handleClose();
-              break;
-            case "ArrowLeft":
-              handlePrev();
-              break;
-            case "ArrowRight":
-              handleNext();
-              break;
-          }
-        };
-        onMounted(() => {
-          document.addEventListener("keydown", handleKeyDown);
-        });
-        onBeforeUnmount(() => {
-          document.removeEventListener("keydown", handleKeyDown);
-          document.body.style.overflow = "";
-        });
-        const transform = computed(() => calculateTransform(scale.value, offsetX.value, offsetY.value));
-        return () => {
-          if (!isOpen.value || !props.images.length) return null;
-          const currentSrc = props.images[index.value] || props.images[0];
-          const mask = h("div", {
-            class: imagePreviewMaskClasses,
-            "aria-hidden": "true"
-          });
-          const img = h("img", {
-            src: currentSrc,
-            class: imagePreviewImgClasses,
-            style: { transform: transform.value },
-            alt: `Preview image ${index.value + 1}`,
-            draggable: false,
-            onMousedown: handleMouseDown,
-            onMousemove: handleMouseMove,
-            onMouseup: handleMouseUp,
-            onMouseleave: handleMouseUp
-          });
-          const closeBtn = h(
-            "button",
-            {
-              class: imagePreviewCloseBtnClasses,
-              onClick: handleClose,
-              "aria-label": "Close preview",
-              type: "button"
-            },
-            [svgIcon(previewCloseIconPath)]
-          );
-          const toolbar = h("div", { class: imagePreviewToolbarClasses }, [
-            h(
-              "button",
-              {
-                class: imagePreviewToolbarBtnClasses,
-                onClick: handleZoomOut,
-                "aria-label": "Zoom out",
-                type: "button"
-              },
-              [svgIcon(zoomOutIconPath)]
-            ),
-            h(
-              "button",
-              {
-                class: imagePreviewToolbarBtnClasses,
-                onClick: handleReset,
-                "aria-label": "Reset",
-                type: "button"
-              },
-              [svgIcon(resetIconPath)]
-            ),
-            h(
-              "button",
-              {
-                class: imagePreviewToolbarBtnClasses,
-                onClick: handleZoomIn,
-                "aria-label": "Zoom in",
-                type: "button"
-              },
-              [svgIcon(zoomInIconPath)]
-            ),
-            navState.value.counter ? h("span", { class: imagePreviewCounterClasses }, navState.value.counter) : null
-          ]);
-          const prevBtn = props.images.length > 1 ? h(
-            "button",
-            {
-              class: classNames(imagePreviewNavBtnClasses, "left-4"),
-              onClick: handlePrev,
-              disabled: !navState.value.hasPrev,
-              "aria-label": "Previous image",
-              type: "button"
-            },
-            [svgIcon(prevIconPath)]
-          ) : null;
-          const nextBtn = props.images.length > 1 ? h(
-            "button",
-            {
-              class: classNames(imagePreviewNavBtnClasses, "right-4"),
-              onClick: handleNext,
-              disabled: !navState.value.hasNext,
-              "aria-label": "Next image",
-              type: "button"
-            },
-            [svgIcon(nextIconPath)]
-          ) : null;
-          const wrapper = h(
-            "div",
-            {
-              class: imagePreviewWrapperClasses,
-              style: { zIndex: props.zIndex },
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-label": "Image preview",
-              onClick: handleMaskClick,
-              onWheel: handleWheel
-            },
-            [mask, img, closeBtn, prevBtn, nextBtn, toolbar]
-          );
-          return h(Teleport, { to: "body" }, [wrapper]);
-        };
-      }
-    });
-    ImagePreview_default = ImagePreview;
-  }
-});
-
-export { ImagePreview, ImagePreview_default, ImagePreview_exports, init_ImagePreview };

package/dist/chunk-ZXR4DAAO.mjs

@@ -1,240 +0,0 @@
-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({
-  name: "TigerTabPane",
-  props: {
-    /**
-     * Unique key for the tab pane (required)
-     */
-    tabKey: {
-      type: [String, Number],
-      required: true
-    },
-    /**
-     * Tab label/title
-     */
-    label: {
-      type: String,
-      required: true
-    },
-    /**
-     * Whether the tab is disabled
-     * @default false
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Whether the tab can be closed (overrides parent closable)
-     */
-    closable: {
-      type: Boolean,
-      default: void 0
-    },
-    /**
-     * Icon for the tab
-     */
-    icon: {
-      type: [String, Object],
-      default: void 0
-    },
-    /**
-     * Additional CSS classes
-     */
-    className: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Custom styles
-     */
-    style: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Render mode - 'tab' for tab item, 'pane' for content pane
-     * @internal
-     */
-    renderMode: {
-      type: String,
-      default: "pane"
-    },
-    // Internal props for a11y + roving tabindex
-    tabId: {
-      type: String,
-      default: void 0
-    },
-    panelId: {
-      type: String,
-      default: void 0
-    },
-    tabIndex: {
-      type: Number,
-      default: void 0
-    }
-  },
-  setup(props, { slots }) {
-    const tabsContext = inject(TabsContextKey);
-    if (!tabsContext) {
-      throw new Error("TabPane must be used within a Tabs component");
-    }
-    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";
-    });
-    const tabItemClasses = computed(() => {
-      return getTabItemClasses(isActive.value, props.disabled, tabsContext.type, tabsContext.size);
-    });
-    const tabPaneClasses = computed(() => {
-      return classNames(getTabPaneClasses(isActive.value), props.className);
-    });
-    const handleClick = () => {
-      if (!props.disabled) {
-        tabsContext.handleTabClick(props.tabKey);
-      }
-    };
-    const handleClose = (event) => {
-      if (!props.disabled) {
-        tabsContext.handleTabClose(props.tabKey, event);
-      }
-    };
-    const handleKeydown = (event) => {
-      if (props.disabled) {
-        return;
-      }
-      if (isClosable.value && (event.key === "Backspace" || event.key === "Delete")) {
-        event.preventDefault();
-        tabsContext.handleTabClose(props.tabKey, event);
-        return;
-      }
-      const isVertical = tabsContext.tabPosition === "left" || tabsContext.tabPosition === "right";
-      const nextKeys = isVertical ? ["ArrowDown"] : ["ArrowRight"];
-      const prevKeys = isVertical ? ["ArrowUp"] : ["ArrowLeft"];
-      const key = event.key;
-      if (nextKeys.includes(key) || prevKeys.includes(key) || key === "Home" || key === "End" || key === "Enter" || key === " ") {
-        event.preventDefault();
-      }
-      if (key === "Enter" || key === " ") {
-        tabsContext.handleTabClick(props.tabKey);
-        return;
-      }
-      const tabList = event.currentTarget?.closest('[role="tablist"]');
-      const tabButtons = Array.from(
-        tabList?.querySelectorAll('[role="tab"]') ?? []
-      );
-      const enabled = tabButtons.filter((b) => !b.disabled);
-      const currentIndex = enabled.findIndex((b) => b.id === props.tabId);
-      if (currentIndex === -1) {
-        return;
-      }
-      const focusByIndex = (index) => {
-        const next = enabled[index];
-        if (!next) return;
-        next.focus();
-        const nextKey = next.getAttribute("data-tiger-tab-key");
-        if (nextKey != null) {
-          const parsed = nextKey.startsWith("n:") ? Number(nextKey.slice(2)) : nextKey.startsWith("s:") ? nextKey.slice(2) : nextKey;
-          tabsContext.handleTabClick(parsed);
-        }
-      };
-      if (nextKeys.includes(key)) {
-        focusByIndex((currentIndex + 1) % enabled.length);
-        return;
-      }
-      if (prevKeys.includes(key)) {
-        focusByIndex((currentIndex - 1 + enabled.length) % enabled.length);
-        return;
-      }
-      if (key === "Home") {
-        focusByIndex(0);
-        return;
-      }
-      if (key === "End") {
-        focusByIndex(enabled.length - 1);
-      }
-    };
-    return () => {
-      if (props.renderMode === "tab") {
-        return h(
-          "button",
-          {
-            type: "button",
-            class: tabItemClasses.value,
-            role: "tab",
-            id: props.tabId,
-            "aria-controls": props.panelId,
-            "aria-selected": isActive.value,
-            "aria-disabled": props.disabled,
-            disabled: props.disabled,
-            tabindex: typeof props.tabIndex === "number" ? props.tabIndex : isActive.value ? 0 : -1,
-            "data-tiger-tabs-id": tabsContext.idBase,
-            "data-tiger-tab-key": typeof props.tabKey === "number" ? `n:${props.tabKey}` : `s:${props.tabKey}`,
-            onClick: handleClick,
-            onKeydown: handleKeydown
-          },
-          [
-            // Icon
-            props.icon && h("span", { class: "flex items-center" }, props.icon),
-            // Label
-            h("span", props.label),
-            // Close button
-            isClosable.value && h(
-              "span",
-              {
-                role: "button",
-                class: tabCloseButtonClasses,
-                "aria-label": `Close ${String(props.label)}`,
-                tabindex: -1,
-                onClick: handleClose
-              },
-              h(
-                "svg",
-                {
-                  class: "w-4 h-4",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: closeIconViewBox
-                },
-                h("path", {
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round",
-                  "stroke-width": "2",
-                  d: closeIconPathD
-                })
-              )
-            )
-          ]
-        );
-      }
-      const shouldRender = tabsContext.lazy ? hasBeenActivated.value && (isActive.value || !tabsContext.destroyInactiveTabPane) : isActive.value || !tabsContext.destroyInactiveTabPane;
-      if (!shouldRender) {
-        return null;
-      }
-      return h(
-        "div",
-        {
-          class: tabPaneClasses.value,
-          style: props.style,
-          role: "tabpanel",
-          id: props.panelId,
-          "aria-labelledby": props.tabId,
-          "aria-hidden": !isActive.value
-        },
-        slots.default?.()
-      );
-    };
-  }
-});
-var TabPane_default = TabPane;
-
-export { TabPane, TabPane_default };