@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/chunk-44N7LE3Q.js

@@ -0,0 +1,568 @@
+"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) => {
+      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.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 _vue.h.call(void 0, 
+          "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 && _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, 
+              "span",
+              {
+                role: "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);
+    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();
+      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;
+      }
+      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;

package/dist/chunk-46DEQQMB.mjs

@@ -1,7 +1,11 @@
-import { defineComponent, computed, h } from 'vue';
-import { classNames, layoutFooterClasses, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
-
 // src/components/Footer.ts
+import { defineComponent, h, computed } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  layoutFooterClasses,
+  mergeStyleValues
+} from "@expcat/tigercat-core";
 var Footer = defineComponent({
   name: "TigerFooter",
   inheritAttrs: false,
@@ -50,4 +54,7 @@ var Footer = defineComponent({
 });
 var Footer_default = Footer;
 
-export { Footer, Footer_default };
+export {
+  Footer,
+  Footer_default
+};

package/dist/{chunk-243JSTYQ.mjs → chunk-4CWRNKPE.mjs}

@@ -1,7 +1,33 @@
-import { useFloatingPopup } from './chunk-6A57RY3H.mjs';
-import { defineComponent, computed, isVNode, h, cloneVNode } from 'vue';
-import { createFloatingIdFactory, classNames, getPopconfirmContainerClasses, coerceClassValue, getPopconfirmTriggerClasses, getPopconfirmArrowClasses, getPopconfirmContentClasses, getPopconfirmTitleClasses, getPopconfirmDescriptionClasses, getPopconfirmButtonsClasses, getPopconfirmCancelButtonClasses, getPopconfirmIconClasses, getPopconfirmOkButtonClasses, mergeStyleValues, popconfirmIconViewBox, popconfirmIconStrokeWidth, getPopconfirmIconPath, popconfirmIconPathStrokeLinejoin, popconfirmIconPathStrokeLinecap } from '@expcat/tigercat-core';
+import {
+  useFloatingPopup
+} from "./chunk-DBTS5QBX.mjs";
+import {
+  renderVueBodyTeleport
+} from "./chunk-7RIWAO2A.mjs";
 
+// src/components/Popconfirm.ts
+import { defineComponent, computed, h, cloneVNode, isVNode } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  createFloatingIdFactory,
+  getPopconfirmIconPath,
+  getPopconfirmContainerClasses,
+  getPopconfirmTriggerClasses,
+  getPopconfirmContentClasses,
+  getPopconfirmTitleClasses,
+  getPopconfirmDescriptionClasses,
+  getPopconfirmIconClasses,
+  getPopconfirmArrowClasses,
+  getPopconfirmButtonsClasses,
+  getPopconfirmCancelButtonClasses,
+  getPopconfirmOkButtonClasses,
+  mergeStyleValues,
+  popconfirmIconPathStrokeLinecap,
+  popconfirmIconPathStrokeLinejoin,
+  popconfirmIconStrokeWidth,
+  popconfirmIconViewBox
+} from "@expcat/tigercat-core";
 var renderPopconfirmIcon = (iconType) => {
   return h(
     "svg",
@@ -124,10 +150,12 @@ var Popconfirm = defineComponent({
             const existingOnClick = existingProps.onClick;
             const onClick = (event) => {
               if (typeof existingOnClick === "function") {
+                ;
                 existingOnClick(event);
               } else if (Array.isArray(existingOnClick)) {
                 for (const handler of existingOnClick) {
                   if (typeof handler === "function") {
+                    ;
                     handler(event);
                   }
                 }
@@ -241,11 +269,14 @@ var Popconfirm = defineComponent({
           class: containerClasses.value,
           style: mergeStyleValues(attrs.style, props.style)
         },
-        [trigger, content]
+        [trigger, renderVueBodyTeleport(content)]
       );
     };
   }
 });
 var Popconfirm_default = Popconfirm;
 
-export { Popconfirm, Popconfirm_default };
+export {
+  Popconfirm,
+  Popconfirm_default
+};