@expcat/tigercat-vue 1.5.0 → 2.0.0-preview.1

package/dist/chunk-YTE45DNC.js

@@ -1,571 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Tabs.ts
-
-
-
-
-
-
-
-
-
-
-var _vue = require('vue');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-var TabsContextKey = /* @__PURE__ */ Symbol("TabsContext");
-var TabPane = _vue.defineComponent.call(void 0, {
-  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 = _vue.inject.call(void 0, TabsContextKey);
-    if (!tabsContext) {
-      throw new Error("TabPane must be used within a Tabs component");
-    }
-    const isActive = _vue.computed.call(void 0, () => {
-      return _tigercatcore.isKeyActive.call(void 0, props.tabKey, tabsContext.activeKey);
-    });
-    const hasBeenActivated = _vue.ref.call(void 0, isActive.value);
-    _vue.watch.call(void 0, isActive, (val) => {
-      if (val) hasBeenActivated.value = true;
-    });
-    const isClosable = _vue.computed.call(void 0, () => {
-      return props.closable !== void 0 ? props.closable : tabsContext.closable && tabsContext.type === "editable-card";
-    });
-    const tabItemClasses = _vue.computed.call(void 0, () => {
-      return _tigercatcore.getTabItemClasses.call(void 0, isActive.value, props.disabled, tabsContext.type, tabsContext.size);
-    });
-    const tabPaneClasses = _vue.computed.call(void 0, () => {
-      return _tigercatcore.classNames.call(void 0, _tigercatcore.getTabPaneClasses.call(void 0, 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 = _optionalChain([event, 'access', _ => _.currentTarget, 'optionalAccess', _2 => _2.closest, 'call', _3 => _3('[role="tablist"]')]);
-      const tabButtons = Array.from(_nullishCoalesce(_optionalChain([tabList, 'optionalAccess', _4 => _4.querySelectorAll, 'call', _5 => _5('[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 _vue.h.call(void 0, 
-          "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 && _vue.h.call(void 0, "span", { class: "flex items-center" }, props.icon),
-            _vue.h.call(void 0, "span", props.label),
-            isClosable.value && _vue.h.call(void 0, 
-              "button",
-              {
-                type: "button",
-                class: _tigercatcore.tabCloseButtonClasses,
-                "aria-label": `Close ${String(props.label)}`,
-                tabindex: -1,
-                onClick: handleClose
-              },
-              _vue.h.call(void 0, 
-                "svg",
-                {
-                  class: "w-4 h-4",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: _tigercatcore.closeIconViewBox
-                },
-                _vue.h.call(void 0, "path", {
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round",
-                  "stroke-width": "2",
-                  d: _tigercatcore.closeIconPathD
-                })
-              )
-            )
-          ]
-        );
-      }
-      const shouldRender = tabsContext.lazy ? hasBeenActivated.value && (isActive.value || !tabsContext.destroyInactiveTabPane) : isActive.value || !tabsContext.destroyInactiveTabPane;
-      if (!shouldRender) {
-        return null;
-      }
-      return _vue.h.call(void 0, 
-        "div",
-        {
-          class: tabPaneClasses.value,
-          style: props.style,
-          role: "tabpanel",
-          id: props.panelId,
-          "aria-labelledby": props.tabId,
-          "aria-hidden": !isActive.value
-        },
-        _optionalChain([slots, 'access', _6 => _6.default, 'optionalCall', _7 => _7()])
-      );
-    };
-  }
-});
-var Tabs = _vue.defineComponent.call(void 0, {
-  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 = _vue.getCurrentInstance.call(void 0, );
-    const idBase = `tiger-tabs-${_nullishCoalesce(_optionalChain([instance, 'optionalAccess', _8 => _8.uid]), () => ( "0"))}`;
-    const internalActiveKey = _vue.ref.call(void 0, props.defaultActiveKey);
-    const swipeStart = _vue.ref.call(void 0, null);
-    let lastTabKeys = [];
-    const currentActiveKey = _vue.computed.call(void 0, () => {
-      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 = _tigercatcore.getNextActiveKey.call(void 0, key, currentActiveKey.value, lastTabKeys);
-      }
-      emit("edit", { targetKey: key, action: "remove" });
-    };
-    const activateAdjacentTab = (direction, enabledTabKeys) => {
-      if (enabledTabKeys.length <= 1) return;
-      const currentIndex = enabledTabKeys.indexOf(_nullishCoalesce(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 = _tigercatcore.getGestureTouchPoint.call(void 0, event.touches, event.timeStamp);
-    };
-    const handleContentTouchEnd = (event, enabledTabKeys) => {
-      if (!props.swipeable || !swipeStart.value || event.changedTouches.length !== 1) return;
-      const endPoint = _tigercatcore.getGestureTouchPoint.call(void 0, event.changedTouches, event.timeStamp);
-      const swipe = _tigercatcore.resolveSwipeGesture.call(void 0, 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 = _vue.computed.call(void 0, () => {
-      return _tigercatcore.classNames.call(void 0, _tigercatcore.getTabsContainerClasses.call(void 0, props.tabPosition), props.className);
-    });
-    const tabNavClasses = _vue.computed.call(void 0, () => {
-      return _tigercatcore.getTabNavClasses.call(void 0, props.tabPosition, props.type);
-    });
-    const tabNavListClasses = _vue.computed.call(void 0, () => {
-      return _tigercatcore.getTabNavListClasses.call(void 0, props.tabPosition, props.centered);
-    });
-    _vue.provide.call(void 0, 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 = _optionalChain([slots, 'access', _9 => _9.default, 'optionalCall', _10 => _10()]) || [];
-      const children = [];
-      const flatten = (vnodes) => {
-        for (const vnode of vnodes) {
-          if (vnode.type === _vue.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 = _optionalChain([child, 'optionalAccess', _11 => _11.type]);
-        const childName = typeof childType === "object" && childType && "name" in childType ? childType.name : void 0;
-        if (childName !== "TigerTabPane") continue;
-        const childProps = _nullishCoalesce(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 = _nullishCoalesce(currentActiveKey.value, () => ( firstTabKey));
-      const activeTabIndex = tabKeys.indexOf(_nullishCoalesce(resolvedActiveKey, () => ( "")));
-      for (const { type, props: childProps, children: childChildren } of validChildren) {
-        const tabId = `${idBase}-tab-${String(_nullishCoalesce(childProps.tabKey, () => ( "")))}`;
-        const panelId = `${idBase}-panel-${String(_nullishCoalesce(childProps.tabKey, () => ( "")))}`;
-        tabItems.push(
-          _vue.h.call(void 0, type, {
-            ...childProps,
-            renderMode: "tab",
-            tabId,
-            panelId,
-            tabIndex: childProps.tabKey === resolvedActiveKey ? 0 : -1
-          })
-        );
-        tabPanes.push(
-          _vue.h.call(void 0, 
-            type,
-            { ...childProps, renderMode: "pane", tabId, panelId },
-            childChildren
-          )
-        );
-      }
-      const tabNavContent = _vue.h.call(void 0, 
-        "div",
-        {
-          class: tabNavClasses.value,
-          role: "tablist",
-          "aria-orientation": props.tabPosition === "left" || props.tabPosition === "right" ? "vertical" : "horizontal"
-        },
-        [
-          _vue.h.call(void 0, 
-            "div",
-            {
-              class: tabNavListClasses.value,
-              style: _tigercatcore.getTabNavListStyle.call(void 0, props.type, props.tabPosition, tabKeys.length)
-            },
-            [
-              props.type === "line" ? _vue.h.call(void 0, "div", {
-                "data-tiger-tabs-indicator": "true",
-                "aria-hidden": "true",
-                class: _tigercatcore.getTabIndicatorClasses.call(void 0, props.type, props.tabPosition),
-                style: _tigercatcore.getTabIndicatorStyle.call(void 0, activeTabIndex, tabKeys.length, props.tabPosition)
-              }) : null,
-              ...tabItems,
-              props.type === "editable-card" ? _vue.h.call(void 0, 
-                "button",
-                {
-                  type: "button",
-                  class: _tigercatcore.tabAddButtonClasses,
-                  onClick: () => emit("edit", { targetKey: void 0, action: "add" }),
-                  "aria-label": "Add tab"
-                },
-                "+"
-              ) : null
-            ]
-          )
-        ]
-      );
-      const tabContent = _vue.h.call(void 0, 
-        "div",
-        {
-          class: _tigercatcore.tabContentBaseClasses,
-          onTouchstart: handleContentTouchStart,
-          onTouchend: (event) => handleContentTouchEnd(event, enabledTabKeys),
-          onTouchcancel: () => {
-            swipeStart.value = null;
-          }
-        },
-        tabPanes
-      );
-      return _vue.h.call(void 0, 
-        "div",
-        { class: containerClasses.value, style: props.style },
-        props.tabPosition === "bottom" ? [tabContent, tabNavContent] : [tabNavContent, tabContent]
-      );
-    };
-  }
-});
-var Tabs_default = Tabs;
-
-
-
-
-
-
-exports.TabsContextKey = TabsContextKey; exports.TabPane = TabPane; exports.Tabs = Tabs; exports.Tabs_default = Tabs_default;