@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/chunk-UCDB56MB.mjs

@@ -0,0 +1,486 @@
+import { defineComponent, inject, computed, ref, watch, h, getCurrentInstance, provide, Fragment } from 'vue';
+import { isKeyActive, getTabItemClasses, classNames, getTabPaneClasses, tabCloseButtonClasses, closeIconViewBox, closeIconPathD, getTabsContainerClasses, getTabNavClasses, getTabNavListClasses, getTabNavListStyle, getTabIndicatorStyle, getTabIndicatorClasses, tabAddButtonClasses, tabContentBaseClasses } from '@expcat/tigercat-core';
+
+// src/components/Tabs.ts
+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
+    },
+    /**
+     * 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 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 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;
+      },
+      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 = [];
+      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);
+        }
+        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 }, tabPanes);
+      return h(
+        "div",
+        { class: containerClasses.value, style: props.style },
+        props.tabPosition === "bottom" ? [tabContent, tabNavContent] : [tabNavContent, tabContent]
+      );
+    };
+  }
+});
+var Tabs_default = Tabs;
+
+export { TabPane, Tabs, TabsContextKey, Tabs_default };

package/dist/{chunk-FCV4ML6I.js → chunk-UHVUKLHF.js}

@@ -16,6 +16,10 @@ var ChartCanvas = vue.defineComponent({
       type: Number,
       default: 200
     },
+    responsive: {
+      type: Boolean,
+      default: false
+    },
     padding: {
       type: [Number, Object],
       default: 24
@@ -31,22 +35,53 @@ var ChartCanvas = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
+    const svgRef = vue.ref(null);
+    const observedSize = vue.ref(null);
+    const resizeController = tigercatCore.createChartResizeObserverController({
+      onSizeChange: (size) => {
+        observedSize.value = size;
+      }
+    });
+    const resolvedSize = vue.computed(
+      () => tigercatCore.resolveResponsiveChartSize(
+        { width: props.width, height: props.height },
+        props.responsive ? observedSize.value : null
+      )
+    );
+    const innerRect = vue.computed(
+      () => tigercatCore.getChartInnerRect(resolvedSize.value.width, resolvedSize.value.height, props.padding)
+    );
     const svgClasses = vue.computed(
       () => tigercatCore.classNames(tigercatCore.chartCanvasBaseClasses, tigercatCore.coerceClassValue(attrs.class), props.className)
     );
     const svgStyle = vue.computed(() => ({
       ...attrs.style
     }));
+    const syncResponsiveObserver = () => {
+      if (!props.responsive) {
+        resizeController.disconnect();
+        observedSize.value = null;
+        return;
+      }
+      const target = svgRef.value?.parentElement;
+      if (target) {
+        resizeController.observe(target);
+      }
+    };
+    vue.onMounted(syncResponsiveObserver);
+    vue.watch(() => props.responsive, syncResponsiveObserver);
+    vue.onBeforeUnmount(() => resizeController.disconnect());
     return () => {
       const rect = innerRect.value;
+      const size = resolvedSize.value;
       return vue.h(
         "svg",
         {
           ...attrs,
-          width: props.width,
-          height: props.height,
-          viewBox: `0 0 ${props.width} ${props.height}`,
+          ref: svgRef,
+          width: size.width,
+          height: size.height,
+          viewBox: `0 0 ${size.width} ${size.height}`,
           class: svgClasses.value,
           style: svgStyle.value
         },

package/dist/{chunk-M7JUNLA7.mjs → chunk-UM5GGKIX.mjs}

@@ -1,20 +1,22 @@
-import { h, defineComponent, computed } from 'vue';
-import { getSpinnerSVG, normalizeSvgAttrs, buttonDangerClasses, getButtonVariantClasses, classNames, buttonBaseClasses, buttonSizeClasses, buttonDisabledClasses, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
+import { defineComponent, computed, h } from 'vue';
+import { buttonDangerClasses, getButtonVariantClasses, composeComponentClasses, buttonBaseClasses, buttonSizeClasses, buttonDisabledClasses, mergeStyleValues, getSpinnerSVG, normalizeSvgAttrs } from '@expcat/tigercat-core';
 
 // src/components/Button.ts
-var spinnerSvg = getSpinnerSVG("spinner");
-var LoadingSpinner = h(
-  "svg",
-  {
-    class: "animate-spin h-4 w-4",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: spinnerSvg.viewBox,
-    "aria-hidden": "true",
-    focusable: "false"
-  },
-  spinnerSvg.elements.map((el) => h(el.type, normalizeSvgAttrs(el.attrs)))
-);
+var createLoadingSpinner = () => {
+  const spinnerSvg = getSpinnerSVG("spinner");
+  return h(
+    "svg",
+    {
+      class: "animate-spin h-4 w-4",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: spinnerSvg.viewBox,
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    spinnerSvg.elements.map((el) => h(el.type, normalizeSvgAttrs(el.attrs)))
+  );
+};
 var Button = defineComponent({
   name: "TigerButton",
   inheritAttrs: false,
@@ -80,14 +82,14 @@ var Button = defineComponent({
   setup(props, { slots, emit, attrs }) {
     const buttonClasses = computed(() => {
       const variantClasses = props.danger ? buttonDangerClasses[props.variant] ?? buttonDangerClasses.primary : getButtonVariantClasses(props.variant);
-      return classNames(
+      return composeComponentClasses(
         buttonBaseClasses,
         variantClasses,
         buttonSizeClasses[props.size],
         (props.disabled || props.loading) && buttonDisabledClasses,
         props.block && "w-full",
         props.className,
-        coerceClassValue(attrs.class)
+        attrs.class
       );
     });
     const mergedStyle = computed(() => mergeStyleValues(attrs.style, props.style));
@@ -97,7 +99,7 @@ var Button = defineComponent({
       const loadingNode = props.loading ? h(
         "span",
         { class: iconIsRight ? "ml-2 order-1" : "mr-2" },
-        slots["loading-icon"] ? slots["loading-icon"]() : LoadingSpinner
+        slots["loading-icon"] ? slots["loading-icon"]() : createLoadingSpinner()
       ) : null;
       const iconNode = !props.loading && slots.icon ? h("span", { class: iconIsRight ? "ml-2 order-1" : "mr-2" }, slots.icon()) : null;
       return h(

package/dist/{chunk-ZA2PLF7O.mjs → chunk-UNTTADHL.mjs}

@@ -1,6 +1,6 @@
-import { RowContextKey } from './chunk-2SCIJ2RW.mjs';
+import { RowContextKey } from './chunk-M3G6LJKZ.mjs';
 import { defineComponent, inject, computed, h } from 'vue';
-import { classNames, getSpanClasses, getOffsetClasses, getOrderClasses, getFlexClasses, getColMergedStyleVars, getGutterStyles } from '@expcat/tigercat-core';
+import { classNames, getSpanClasses, getOffsetClasses, getOrderClasses, getFlexClasses, getColGutterClasses, getColMergedStyleVars } from '@expcat/tigercat-core';
 
 var Col = defineComponent({
   name: "TigerCol",
@@ -33,11 +33,11 @@ var Col = defineComponent({
         isFlexSpanMode.value ? "" : getSpanClasses(props.span),
         getOffsetClasses(props.offset),
         getOrderClasses(props.order),
-        getFlexClasses(props.flex)
+        getFlexClasses(props.flex),
+        getColGutterClasses(gutter.value)
       )
     );
     const colMergedStyle = computed(() => ({
-      ...getGutterStyles(gutter.value).colStyle,
       ...getColMergedStyleVars(
         isFlexSpanMode.value ? void 0 : props.span,
         props.offset,