@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-BR7FIC54.js → chunk-CEAMHLIL.js}

@@ -95,10 +95,7 @@ var Tabs = vue.defineComponent({
     });
     const handleTabClick = (key) => {
       emit("tab-click", key);
-      const prevKey = currentActiveKey.value;
-      if (prevKey === key) {
-        return;
-      }
+      if (currentActiveKey.value === key) return;
       if (props.activeKey === void 0) {
         internalActiveKey.value = key;
       }
@@ -118,85 +115,81 @@ var Tabs = vue.defineComponent({
     const tabNavListClasses = vue.computed(() => {
       return tigercatCore.getTabNavListClasses(props.tabPosition, props.centered);
     });
-    const tabContentClasses = vue.computed(() => {
-      return tigercatCore.tabContentBaseClasses;
-    });
-    const tabsContextValue = vue.reactive({
-      activeKey: currentActiveKey.value,
-      type: props.type,
-      size: props.size,
-      tabPosition: props.tabPosition,
-      closable: props.closable,
-      destroyInactiveTabPane: props.destroyInactiveTabPane,
+    vue.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;
+      },
       idBase,
       handleTabClick,
       handleTabClose
     });
-    vue.watch(
-      () => [
-        currentActiveKey.value,
-        props.type,
-        props.tabPosition,
-        props.size,
-        props.closable,
-        props.destroyInactiveTabPane
-      ],
-      ([activeKey, type, tabPosition, size, closable, destroyInactiveTabPane]) => {
-        tabsContextValue.activeKey = activeKey;
-        tabsContextValue.type = type;
-        tabsContextValue.tabPosition = tabPosition;
-        tabsContextValue.size = size;
-        tabsContextValue.closable = closable;
-        tabsContextValue.destroyInactiveTabPane = destroyInactiveTabPane;
-      }
-    );
-    vue.provide(TabsContextKey, tabsContextValue);
     return () => {
-      const children = slots.default?.() || [];
+      const rawChildren = slots.default?.() || [];
+      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 = [];
       let firstTabKey;
-      children.forEach((child) => {
+      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") {
-          const childProps = child.props ?? {};
-          if (firstTabKey === void 0) {
-            const k = childProps.tabKey;
-            if (typeof k === "string" || typeof k === "number") {
-              firstTabKey = k;
-            }
-          }
-          const tabPaneType = typeof child.type === "string" || typeof child.type === "object" ? child.type : "div";
-          const resolvedActiveKey = props.activeKey ?? internalActiveKey.value ?? props.defaultActiveKey ?? firstTabKey;
-          const tabId = `${idBase}-tab-${String(childProps.tabKey ?? "")}`;
-          const panelId = `${idBase}-panel-${String(childProps.tabKey ?? "")}`;
-          tabItems.push(
-            vue.h(tabPaneType, {
-              ...childProps,
-              renderMode: "tab",
-              tabId,
-              panelId,
-              tabIndex: childProps.tabKey === resolvedActiveKey ? 0 : -1
-            })
-          );
-          tabPanes.push(
-            vue.h(
-              tabPaneType,
-              {
-                ...childProps,
-                renderMode: "pane",
-                tabId,
-                panelId
-              },
-              child.children ?? 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;
         }
-      });
+        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;
-        tabsContextValue.activeKey = firstTabKey;
+      }
+      const resolvedActiveKey = currentActiveKey.value ?? firstTabKey;
+      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(
+          vue.h(type, {
+            ...childProps,
+            renderMode: "tab",
+            tabId,
+            panelId,
+            tabIndex: childProps.tabKey === resolvedActiveKey ? 0 : -1
+          })
+        );
+        tabPanes.push(
+          vue.h(
+            type,
+            { ...childProps, renderMode: "pane", tabId, panelId },
+            childChildren
+          )
+        );
       }
       const tabNavContent = vue.h(
         "div",
@@ -206,49 +199,25 @@ var Tabs = vue.defineComponent({
           "aria-orientation": props.tabPosition === "left" || props.tabPosition === "right" ? "vertical" : "horizontal"
         },
         [
-          vue.h(
-            "div",
-            {
-              class: tabNavListClasses.value
-            },
-            [
-              ...tabItems,
-              props.type === "editable-card" ? vue.h(
-                "button",
-                {
-                  type: "button",
-                  class: tigercatCore.tabAddButtonClasses,
-                  onClick: () => emit("edit", { targetKey: void 0, action: "add" }),
-                  "aria-label": "Add tab"
-                },
-                "+"
-              ) : null
-            ]
-          )
+          vue.h("div", { class: tabNavListClasses.value }, [
+            ...tabItems,
+            props.type === "editable-card" ? vue.h(
+              "button",
+              {
+                type: "button",
+                class: tigercatCore.tabAddButtonClasses,
+                onClick: () => emit("edit", { targetKey: void 0, action: "add" }),
+                "aria-label": "Add tab"
+              },
+              "+"
+            ) : null
+          ])
         ]
       );
-      const tabContent = vue.h(
-        "div",
-        {
-          class: tabContentClasses.value
-        },
-        tabPanes
-      );
-      if (props.tabPosition === "left" || props.tabPosition === "right") {
-        return vue.h(
-          "div",
-          {
-            class: containerClasses.value
-          },
-          [tabNavContent, tabContent]
-        );
-      }
+      const tabContent = vue.h("div", { class: tigercatCore.tabContentBaseClasses }, tabPanes);
       return vue.h(
         "div",
-        {
-          class: containerClasses.value,
-          style: props.style
-        },
+        { class: containerClasses.value, style: props.style },
         props.tabPosition === "bottom" ? [tabContent, tabNavContent] : [tabNavContent, tabContent]
       );
     };

package/dist/{chunk-3JANYZE3.js → chunk-CKXZONMO.js}

@@ -32,23 +32,22 @@ var Header = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const attrsRecord = attrs;
     const headerClasses = vue.computed(
-      () => tigercatCore.classNames(tigercatCore.layoutHeaderClasses, props.className, tigercatCore.coerceClassValue(attrsRecord.class))
+      () => tigercatCore.classNames(
+        tigercatCore.layoutHeaderClasses,
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    return () => vue.h(
+      "header",
+      {
+        ...attrs,
+        class: headerClasses.value,
+        style: tigercatCore.mergeStyleValues(props.style, { height: props.height })
+      },
+      slots.default?.()
     );
-    return () => {
-      return vue.h(
-        "header",
-        {
-          ...attrs,
-          class: headerClasses.value,
-          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style, {
-            height: props.height
-          })
-        },
-        slots.default?.()
-      );
-    };
   }
 });
 var Header_default = Header;

package/dist/{chunk-U5ZMB6RE.mjs → chunk-COCECPMG.mjs}

@@ -118,20 +118,6 @@ var Avatar = defineComponent({
           ]
         );
       }
-      if (displayText.value) {
-        return h(
-          "span",
-          {
-            ...baseSpanProps,
-            ...isDecorative ? { "aria-hidden": true } : {
-              role: "img",
-              "aria-label": computedLabel,
-              "aria-labelledby": ariaLabelledbyProp
-            }
-          },
-          displayText.value
-        );
-      }
       return h(
         "span",
         {
@@ -142,7 +128,7 @@ var Avatar = defineComponent({
             "aria-labelledby": ariaLabelledbyProp
           }
         },
-        slots.default ? slots.default() : void 0
+        displayText.value || slots.default?.()
       );
     };
   }

package/dist/{chunk-NTXRWISS.js → chunk-CODQKVQV.js}

@@ -97,29 +97,23 @@ var Collapse = vue.defineComponent({
       );
     });
     const collapseContextValue = vue.reactive({
-      activeKeys: currentActiveKeys.value,
-      accordion: props.accordion,
-      expandIconPosition: props.expandIconPosition,
-      bordered: props.bordered,
-      ghost: props.ghost,
+      get activeKeys() {
+        return currentActiveKeys.value;
+      },
+      get accordion() {
+        return props.accordion;
+      },
+      get expandIconPosition() {
+        return props.expandIconPosition;
+      },
+      get bordered() {
+        return props.bordered;
+      },
+      get ghost() {
+        return props.ghost;
+      },
       handlePanelClick
     });
-    vue.watch(
-      () => [
-        currentActiveKeys.value,
-        props.accordion,
-        props.expandIconPosition,
-        props.bordered,
-        props.ghost
-      ],
-      ([activeKeys, accordion, expandIconPosition, bordered, ghost]) => {
-        collapseContextValue.activeKeys = activeKeys;
-        collapseContextValue.accordion = accordion;
-        collapseContextValue.expandIconPosition = expandIconPosition;
-        collapseContextValue.bordered = bordered;
-        collapseContextValue.ghost = ghost;
-      }
-    );
     vue.provide(CollapseContextKey, collapseContextValue);
     return () => {
       const children = slots.default?.() || [];

package/dist/{chunk-JUIOGBBB.mjs → chunk-D5CR2P7K.mjs}

@@ -1,7 +1,7 @@
 import { DropdownMenu } from './chunk-AN3HKOCS.mjs';
 import { useVueFloating, useVueClickOutside, useVueEscapeKey } from './chunk-CU4M5ABS.mjs';
-import { defineComponent, ref, computed, watch, onBeforeUnmount, provide, h } from 'vue';
-import { classNames, getDropdownContainerClasses, coerceClassValue, mergeStyleValues, getDropdownTriggerClasses, getTransformOrigin } from '@expcat/tigercat-core';
+import { defineComponent, onMounted, ref, computed, watch, onBeforeUnmount, provide, h } from 'vue';
+import { injectDropdownStyles, classNames, getDropdownContainerClasses, coerceClassValue, mergeStyleValues, getDropdownTriggerClasses, DROPDOWN_ENTER_CLASS, getTransformOrigin, getDropdownChevronClasses, DROPDOWN_CHEVRON_PATH } from '@expcat/tigercat-core';
 
 var DropdownContextKey = /* @__PURE__ */ Symbol("DropdownContext");
 var Dropdown = defineComponent({
@@ -63,6 +63,14 @@ var Dropdown = defineComponent({
       type: Boolean,
       default: true
     },
+    /**
+     * Whether to show the dropdown arrow/chevron indicator
+     * @default true
+     */
+    showArrow: {
+      type: Boolean,
+      default: true
+    },
     /**
      * Additional CSS classes
      */
@@ -80,10 +88,11 @@ var Dropdown = defineComponent({
     const attrsRecord = attrs;
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
+    onMounted(() => injectDropdownStyles());
     const internalVisible = ref(props.defaultVisible);
-    const currentVisible = computed(() => {
-      return props.visible !== void 0 ? props.visible : internalVisible.value;
-    });
+    const currentVisible = computed(
+      () => props.visible !== void 0 ? props.visible : internalVisible.value
+    );
     const containerRef = ref(null);
     const triggerRef = ref(null);
     const floatingRef = ref(null);
@@ -96,28 +105,18 @@ var Dropdown = defineComponent({
       emit("visible-change", visible);
     };
     const handleItemClick = () => {
-      if (props.closeOnClick) {
-        setVisible(false);
-      }
+      if (props.closeOnClick) setVisible(false);
     };
     let hoverTimer = null;
     const handleMouseEnter = () => {
       if (props.trigger !== "hover") return;
-      if (hoverTimer) {
-        clearTimeout(hoverTimer);
-      }
-      hoverTimer = setTimeout(() => {
-        setVisible(true);
-      }, 100);
+      if (hoverTimer) clearTimeout(hoverTimer);
+      hoverTimer = setTimeout(() => setVisible(true), 100);
     };
     const handleMouseLeave = () => {
       if (props.trigger !== "hover") return;
-      if (hoverTimer) {
-        clearTimeout(hoverTimer);
-      }
-      hoverTimer = setTimeout(() => {
-        setVisible(false);
-      }, 150);
+      if (hoverTimer) clearTimeout(hoverTimer);
+      hoverTimer = setTimeout(() => setVisible(false), 150);
     };
     const handleClick = () => {
       if (props.trigger !== "click") return;
@@ -139,10 +138,8 @@ var Dropdown = defineComponent({
     watch(
       clickOutsideEnabled,
       (enabled) => {
-        if (cleanupClickOutside) {
-          cleanupClickOutside();
-          cleanupClickOutside = null;
-        }
+        cleanupClickOutside?.();
+        cleanupClickOutside = null;
         if (enabled) {
           cleanupClickOutside = useVueClickOutside({
             enabled: currentVisible,
@@ -158,10 +155,8 @@ var Dropdown = defineComponent({
     watch(
       currentVisible,
       (visible) => {
-        if (cleanupEscapeKey) {
-          cleanupEscapeKey();
-          cleanupEscapeKey = null;
-        }
+        cleanupEscapeKey?.();
+        cleanupEscapeKey = null;
         if (visible) {
           cleanupEscapeKey = useVueEscapeKey({
             enabled: currentVisible,
@@ -172,29 +167,21 @@ var Dropdown = defineComponent({
       { immediate: true }
     );
     onBeforeUnmount(() => {
-      if (hoverTimer) {
-        clearTimeout(hoverTimer);
-      }
-      if (cleanupClickOutside) {
-        cleanupClickOutside();
-      }
-      if (cleanupEscapeKey) {
-        cleanupEscapeKey();
-      }
+      if (hoverTimer) clearTimeout(hoverTimer);
+      cleanupClickOutside?.();
+      cleanupEscapeKey?.();
     });
-    const containerClasses = computed(() => {
-      return classNames(
+    const containerClasses = computed(
+      () => classNames(
         getDropdownContainerClasses(),
         "tiger-dropdown-container",
         props.className,
         coerceClassValue(attrsClass)
-      );
-    });
+      )
+    );
     const mergedStyle = computed(() => mergeStyleValues(attrsStyle, props.style));
-    const triggerClasses = computed(() => {
-      return getDropdownTriggerClasses(props.disabled);
-    });
-    const menuWrapperClasses = computed(() => "absolute z-50");
+    const triggerClasses = computed(() => getDropdownTriggerClasses(props.disabled));
+    const menuWrapperClasses = classNames("absolute z-50", DROPDOWN_ENTER_CLASS);
     const menuWrapperStyles = computed(() => ({
       position: "absolute",
       left: `${x.value}px`,
@@ -207,9 +194,7 @@ var Dropdown = defineComponent({
     });
     return () => {
       const defaultSlot = slots.default?.();
-      if (!defaultSlot || defaultSlot.length === 0) {
-        return null;
-      }
+      if (!defaultSlot || defaultSlot.length === 0) return null;
       let triggerNode = null;
       let menuNode = null;
       defaultSlot.forEach((node) => {
@@ -219,6 +204,20 @@ var Dropdown = defineComponent({
         }
         triggerNode = node;
       });
+      const chevronNode = props.showArrow ? h(
+        "svg",
+        {
+          class: getDropdownChevronClasses(currentVisible.value),
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true"
+        },
+        [h("path", { d: DROPDOWN_CHEVRON_PATH })]
+      ) : null;
       const trigger = triggerNode ? h(
         "div",
         {
@@ -230,13 +229,13 @@ var Dropdown = defineComponent({
           "aria-haspopup": "menu",
           "aria-expanded": currentVisible.value
         },
-        triggerNode
+        [triggerNode, chevronNode]
       ) : null;
       const menu = menuNode ? h(
         "div",
         {
           ref: floatingRef,
-          class: menuWrapperClasses.value,
+          class: menuWrapperClasses,
           style: menuWrapperStyles.value,
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,

package/dist/{chunk-YMIO4A2U.mjs → chunk-D6MR5YRE.mjs}

@@ -79,33 +79,27 @@ var Button = defineComponent({
     });
     const mergedStyle = computed(() => mergeStyleValues(attrs.style, props.style));
     return () => {
-      const children = [];
       const isDisabled = props.disabled || props.loading;
-      const ariaBusy = attrs["aria-busy"] ?? (props.loading ? "true" : void 0);
-      const ariaDisabled = attrs["aria-disabled"] ?? (isDisabled ? "true" : void 0);
-      if (props.loading) {
-        const loadingIcon = slots["loading-icon"] ? slots["loading-icon"]() : LoadingSpinner;
-        children.push(h("span", { class: "mr-2" }, loadingIcon));
-      }
-      if (slots.default) {
-        children.push(slots.default());
-      }
       return h(
         "button",
         {
           ...attrs,
           class: buttonClasses.value,
           style: mergedStyle.value,
-          "aria-busy": ariaBusy,
-          "aria-disabled": ariaDisabled,
+          "aria-busy": attrs["aria-busy"] ?? (props.loading ? "true" : void 0),
+          "aria-disabled": attrs["aria-disabled"] ?? (isDisabled ? "true" : void 0),
           disabled: isDisabled,
           type: props.type,
-          onClick: (event) => {
-            if (isDisabled) return;
-            emit("click", event);
-          }
+          onClick: isDisabled ? void 0 : (event) => emit("click", event)
         },
-        children
+        [
+          props.loading && h(
+            "span",
+            { class: "mr-2" },
+            slots["loading-icon"] ? slots["loading-icon"]() : LoadingSpinner
+          ),
+          slots.default?.()
+        ]
       );
     };
   }

package/dist/{chunk-HRTL6ZTJ.mjs → chunk-D7VMY6WX.mjs}

@@ -1,10 +1,10 @@
-import { Timeline } from './chunk-ZCPYALXT.mjs';
-import { Link } from './chunk-5MKAKQK6.mjs';
-import { Loading } from './chunk-6E73XACM.mjs';
-import { Tag } from './chunk-LNQYYW3E.mjs';
-import { Text } from './chunk-BWKN2DGI.mjs';
-import { Card } from './chunk-WNLRR2NM.mjs';
-import { Avatar } from './chunk-U5ZMB6RE.mjs';
+import { Timeline } from './chunk-LBGTABIU.mjs';
+import { Loading } from './chunk-Q6OYCTQO.mjs';
+import { Link } from './chunk-4YHOD7LT.mjs';
+import { Tag } from './chunk-3G4VPV4D.mjs';
+import { Text } from './chunk-6V7XCCXN.mjs';
+import { Card } from './chunk-YXN3YY5Y.mjs';
+import { Avatar } from './chunk-COCECPMG.mjs';
 import { defineComponent, computed, h } from 'vue';
 import { buildActivityGroups, classNames, coerceClassValue, mergeStyleValues, toActivityTimelineItems, formatActivityTime } from '@expcat/tigercat-core';