@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/chunk-SGRUGYQ6.mjs

@@ -0,0 +1,568 @@
+// 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,
+  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) => {
+      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.disabled);
+      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(
+          "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
+          },
+          [
+            props.icon && h("span", { class: "flex items-center" }, props.icon),
+            h("span", props.label),
+            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 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
+    }
+  },
+  emits: ["update:activeKey", "change", "edit", "tab-click"],
+  setup(props, { slots, emit }) {
+    const instance = getCurrentInstance();
+    const idBase = `tiger-tabs-${instance?.uid ?? "0"}`;
+    const internalActiveKey = ref(props.defaultActiveKey);
+    const swipeStart = ref(null);
+    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();
+      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,
+      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;
+      }
+      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": "Add tab"
+                },
+                "+"
+              ) : 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
+};