@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-U6OGGZBY.mjs

@@ -1,594 +0,0 @@
-import {
-  useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
-
-// src/components/Tabs.ts
-import {
-  defineComponent,
-  computed,
-  ref,
-  watch,
-  provide,
-  inject,
-  h,
-  Fragment,
-  getCurrentInstance
-} from "vue";
-import {
-  classNames,
-  closeIconPathD,
-  closeIconViewBox,
-  getTabsContainerClasses,
-  getTabItemClasses,
-  getTabNavClasses,
-  getTabNavListClasses,
-  getTabNavListStyle,
-  getTabPaneClasses,
-  getTabIndicatorClasses,
-  getTabIndicatorStyle,
-  getGestureTouchPoint,
-  resolveSwipeGesture,
-  isKeyActive,
-  getNextActiveKey,
-  mergeTigerLocale,
-  getTabsLabels,
-  tabAddButtonClasses,
-  tabCloseButtonClasses,
-  tabContentBaseClasses
-} from "@expcat/tigercat-core";
-var TabsContextKey = /* @__PURE__ */ Symbol("TabsContext");
-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) => {
-      event.stopPropagation();
-      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((button) => button.getAttribute("aria-disabled") !== "true");
-      const currentIndex = enabled.findIndex((button) => button.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(
-          "div",
-          {
-            class: tabItemClasses.value,
-            role: "tab",
-            id: props.tabId,
-            "aria-controls": props.panelId,
-            "aria-selected": isActive.value,
-            "aria-disabled": props.disabled,
-            tabindex: props.disabled ? -1 : 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
-          },
-          [
-            props.icon && h("span", { class: "flex items-center" }, props.icon),
-            h("span", props.label),
-            isClosable.value && h(
-              "button",
-              {
-                type: "button",
-                class: tabCloseButtonClasses,
-                "aria-label": tabsContext.labels.closeTabAriaLabel.replace(
-                  "{label}",
-                  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 Tabs = defineComponent({
-  name: "TigerTabs",
-  props: {
-    /**
-     * Currently active tab key
-     */
-    activeKey: {
-      type: [String, Number],
-      default: void 0
-    },
-    /**
-     * Default active tab key (for uncontrolled mode)
-     */
-    defaultActiveKey: {
-      type: [String, Number],
-      default: void 0
-    },
-    /**
-     * Tab type - line, card, or editable-card
-     * @default 'line'
-     */
-    type: {
-      type: String,
-      default: "line"
-    },
-    /**
-     * Tab position - top, bottom, left, or right
-     * @default 'top'
-     */
-    tabPosition: {
-      type: String,
-      default: "top"
-    },
-    /**
-     * Tab size - small, medium, or large
-     * @default 'medium'
-     */
-    size: {
-      type: String,
-      default: "medium"
-    },
-    /**
-     * Whether tabs can be closed (only works with editable-card type)
-     * @default false
-     */
-    closable: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Whether tabs are centered
-     * @default false
-     */
-    centered: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Whether to destroy inactive tab panes
-     * @default false
-     */
-    destroyInactiveTabPane: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Whether to lazily render tab panes (only render when first activated)
-     * @default false
-     * @since 0.6.0
-     */
-    lazy: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Whether horizontal touch swipes switch tabs.
-     * @default true
-     */
-    swipeable: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Additional CSS classes
-     */
-    className: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Custom styles
-     */
-    style: {
-      type: Object,
-      default: void 0
-    },
-    locale: {
-      type: Object,
-      default: void 0
-    },
-    labels: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["update:activeKey", "change", "edit", "tab-click"],
-  setup(props, { slots, emit }) {
-    const config = useTigerConfig();
-    const instance = getCurrentInstance();
-    const idBase = `tiger-tabs-${instance?.uid ?? "0"}`;
-    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const labels = computed(() => getTabsLabels(mergedLocale.value, props.labels));
-    const internalActiveKey = ref(props.defaultActiveKey);
-    const swipeStart = ref(null);
-    let lastTabKeys = [];
-    const currentActiveKey = computed(() => {
-      return props.activeKey !== void 0 ? props.activeKey : internalActiveKey.value;
-    });
-    const handleTabClick = (key) => {
-      emit("tab-click", key);
-      if (currentActiveKey.value === key) return;
-      if (props.activeKey === void 0) {
-        internalActiveKey.value = key;
-      }
-      emit("update:activeKey", key);
-      emit("change", key);
-    };
-    const handleTabClose = (key, event) => {
-      event.stopPropagation();
-      if (props.activeKey === void 0 && key === currentActiveKey.value) {
-        internalActiveKey.value = getNextActiveKey(key, currentActiveKey.value, lastTabKeys);
-      }
-      emit("edit", { targetKey: key, action: "remove" });
-    };
-    const activateAdjacentTab = (direction, enabledTabKeys) => {
-      if (enabledTabKeys.length <= 1) return;
-      const currentIndex = enabledTabKeys.indexOf(currentActiveKey.value ?? enabledTabKeys[0]);
-      const baseIndex = currentIndex >= 0 ? currentIndex : 0;
-      const nextKey = enabledTabKeys[(baseIndex + direction + enabledTabKeys.length) % enabledTabKeys.length];
-      handleTabClick(nextKey);
-    };
-    const handleContentTouchStart = (event) => {
-      if (!props.swipeable || event.touches.length !== 1) return;
-      swipeStart.value = getGestureTouchPoint(event.touches, event.timeStamp);
-    };
-    const handleContentTouchEnd = (event, enabledTabKeys) => {
-      if (!props.swipeable || !swipeStart.value || event.changedTouches.length !== 1) return;
-      const endPoint = getGestureTouchPoint(event.changedTouches, event.timeStamp);
-      const swipe = resolveSwipeGesture(swipeStart.value, endPoint, {
-        minDistance: 48,
-        maxCrossAxisRatio: 0.75
-      });
-      swipeStart.value = null;
-      if (!swipe) return;
-      if (swipe.direction === "left") activateAdjacentTab(1, enabledTabKeys);
-      if (swipe.direction === "right") activateAdjacentTab(-1, enabledTabKeys);
-    };
-    const containerClasses = computed(() => {
-      return classNames(getTabsContainerClasses(props.tabPosition), props.className);
-    });
-    const tabNavClasses = computed(() => {
-      return getTabNavClasses(props.tabPosition, props.type);
-    });
-    const tabNavListClasses = computed(() => {
-      return getTabNavListClasses(props.tabPosition, props.centered);
-    });
-    provide(TabsContextKey, {
-      get activeKey() {
-        return currentActiveKey.value;
-      },
-      get type() {
-        return props.type;
-      },
-      get size() {
-        return props.size;
-      },
-      get tabPosition() {
-        return props.tabPosition;
-      },
-      get closable() {
-        return props.closable;
-      },
-      get destroyInactiveTabPane() {
-        return props.destroyInactiveTabPane;
-      },
-      get lazy() {
-        return props.lazy;
-      },
-      get swipeable() {
-        return props.swipeable;
-      },
-      idBase,
-      get labels() {
-        return labels.value;
-      },
-      handleTabClick,
-      handleTabClose
-    });
-    return () => {
-      const rawChildren = slots.default?.() || [];
-      const children = [];
-      const flatten = (vnodes) => {
-        for (const vnode of vnodes) {
-          if (vnode.type === Fragment && Array.isArray(vnode.children)) {
-            flatten(vnode.children);
-          } else {
-            children.push(vnode);
-          }
-        }
-      };
-      flatten(rawChildren);
-      const tabItems = [];
-      const tabPanes = [];
-      const tabKeys = [];
-      const enabledTabKeys = [];
-      let firstTabKey;
-      const validChildren = [];
-      for (const child of children) {
-        const childType = child?.type;
-        const childName = typeof childType === "object" && childType && "name" in childType ? childType.name : void 0;
-        if (childName !== "TigerTabPane") continue;
-        const childProps = child.props ?? {};
-        const k = childProps.tabKey;
-        if (firstTabKey === void 0 && (typeof k === "string" || typeof k === "number")) {
-          firstTabKey = k;
-        }
-        if (typeof k === "string" || typeof k === "number") {
-          tabKeys.push(k);
-          if (childProps.disabled !== true) {
-            enabledTabKeys.push(k);
-          }
-        }
-        const tabPaneType = typeof child.type === "string" || typeof child.type === "object" ? child.type : "div";
-        validChildren.push({ type: tabPaneType, props: childProps, children: child.children });
-      }
-      if (props.activeKey === void 0 && internalActiveKey.value === void 0 && firstTabKey !== void 0) {
-        internalActiveKey.value = firstTabKey;
-      }
-      lastTabKeys = tabKeys;
-      const resolvedActiveKey = currentActiveKey.value ?? firstTabKey;
-      const activeTabIndex = tabKeys.indexOf(resolvedActiveKey ?? "");
-      for (const { type, props: childProps, children: childChildren } of validChildren) {
-        const tabId = `${idBase}-tab-${String(childProps.tabKey ?? "")}`;
-        const panelId = `${idBase}-panel-${String(childProps.tabKey ?? "")}`;
-        tabItems.push(
-          h(type, {
-            ...childProps,
-            renderMode: "tab",
-            tabId,
-            panelId,
-            tabIndex: childProps.tabKey === resolvedActiveKey ? 0 : -1
-          })
-        );
-        tabPanes.push(
-          h(
-            type,
-            { ...childProps, renderMode: "pane", tabId, panelId },
-            childChildren
-          )
-        );
-      }
-      const tabNavContent = h(
-        "div",
-        {
-          class: tabNavClasses.value,
-          role: "tablist",
-          "aria-orientation": props.tabPosition === "left" || props.tabPosition === "right" ? "vertical" : "horizontal"
-        },
-        [
-          h(
-            "div",
-            {
-              class: tabNavListClasses.value,
-              style: getTabNavListStyle(props.type, props.tabPosition, tabKeys.length)
-            },
-            [
-              props.type === "line" ? h("div", {
-                "data-tiger-tabs-indicator": "true",
-                "aria-hidden": "true",
-                class: getTabIndicatorClasses(props.type, props.tabPosition),
-                style: getTabIndicatorStyle(activeTabIndex, tabKeys.length, props.tabPosition)
-              }) : null,
-              ...tabItems,
-              props.type === "editable-card" ? h(
-                "button",
-                {
-                  type: "button",
-                  class: tabAddButtonClasses,
-                  onClick: () => emit("edit", { targetKey: void 0, action: "add" }),
-                  "aria-label": labels.value.addTabAriaLabel
-                },
-                "+"
-              ) : null
-            ]
-          )
-        ]
-      );
-      const tabContent = h(
-        "div",
-        {
-          class: tabContentBaseClasses,
-          onTouchstart: handleContentTouchStart,
-          onTouchend: (event) => handleContentTouchEnd(event, enabledTabKeys),
-          onTouchcancel: () => {
-            swipeStart.value = null;
-          }
-        },
-        tabPanes
-      );
-      return h(
-        "div",
-        { class: containerClasses.value, style: props.style },
-        props.tabPosition === "bottom" ? [tabContent, tabNavContent] : [tabNavContent, tabContent]
-      );
-    };
-  }
-});
-var Tabs_default = Tabs;
-
-export {
-  TabsContextKey,
-  TabPane,
-  Tabs,
-  Tabs_default
-};