@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-P2DJR6YG.js → chunk-KUJ75OHX.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkWEFTEDUS_js = require('./chunk-WEFTEDUS.js');
+var chunkO2SABM5H_js = require('./chunk-O2SABM5H.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -73,7 +73,7 @@ var SubMenu = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const menuContext = vue.inject(chunkWEFTEDUS_js.MenuContextKey);
+    const menuContext = vue.inject(chunkO2SABM5H_js.MenuContextKey);
     if (!menuContext) {
       console.warn("SubMenu must be used within Menu component");
     }
@@ -84,13 +84,13 @@ var SubMenu = vue.defineComponent({
     const isHovered = vue.ref(false);
     const isOpenByKeyboard = vue.ref(false);
     const effectiveCollapsed = vue.computed(() => {
-      return props.collapsed ?? (menuContext ? menuContext.collapsed : false);
+      return props.collapsed ?? (menuContext ? menuContext.collapsed.value : false);
     });
     const isPopup = vue.computed(() => {
-      return !!menuContext && menuContext.mode === "vertical" && effectiveCollapsed.value;
+      return !!menuContext && menuContext.mode.value === "vertical" && effectiveCollapsed.value;
     });
     const isExpanded = vue.computed(() => {
-      if (menuContext?.mode === "horizontal" || isPopup.value) {
+      if (menuContext?.mode.value === "horizontal" || isPopup.value) {
         return isHovered.value || isOpenByKeyboard.value;
       }
       return isOpen.value;
@@ -98,7 +98,7 @@ var SubMenu = vue.defineComponent({
     const titleClasses = vue.computed(() => {
       if (!menuContext) return "";
       return tigercatCore.classNames(
-        tigercatCore.getSubMenuTitleClasses(menuContext.theme, props.disabled),
+        tigercatCore.getSubMenuTitleClasses(menuContext.theme.value, props.disabled),
         props.className,
         tigercatCore.coerceClassValue(attrs.class)
       );
@@ -110,16 +110,16 @@ var SubMenu = vue.defineComponent({
     });
     const contentClasses = vue.computed(() => {
       if (!menuContext) return "";
-      if (menuContext.mode === "horizontal") {
+      if (menuContext.mode.value === "horizontal") {
         return tigercatCore.submenuContentHorizontalClasses;
       }
       if (isPopup.value) return tigercatCore.submenuContentPopupClasses;
-      if (menuContext.mode === "inline") return tigercatCore.submenuContentInlineClasses;
+      if (menuContext.mode.value === "inline") return tigercatCore.submenuContentInlineClasses;
       return tigercatCore.submenuContentVerticalClasses;
     });
     const handleTitleClick = () => {
       if (!menuContext || props.disabled) return;
-      if (menuContext.mode === "horizontal") return;
+      if (menuContext.mode.value === "horizontal") return;
       if (isPopup.value) {
         isOpenByKeyboard.value = !isOpenByKeyboard.value;
         isHovered.value = true;
@@ -127,82 +127,41 @@ var SubMenu = vue.defineComponent({
       }
       menuContext.handleOpenChange(props.itemKey);
     };
-    const getMenuButtonsWithin = (menuEl) => {
-      return Array.from(
-        menuEl.querySelectorAll('button[data-tiger-menuitem="true"]')
-      ).filter((el) => !el.disabled);
-    };
-    const roveFocus = (current, next) => {
-      const menuEl = current.closest('ul[role="menu"]');
-      if (!menuEl) {
-        next.focus();
-        return;
-      }
-      const items = getMenuButtonsWithin(menuEl);
-      items.forEach((el) => {
-        el.tabIndex = el === next ? 0 : -1;
-      });
-      next.focus();
-    };
-    const moveFocus = (current, delta) => {
-      const menuEl = current.closest('ul[role="menu"]');
-      if (!menuEl) return;
-      const items = getMenuButtonsWithin(menuEl);
-      const currentIndex = items.indexOf(current);
-      if (currentIndex < 0) return;
-      const nextIndex = (currentIndex + delta + items.length) % items.length;
-      roveFocus(current, items[nextIndex]);
-    };
-    const focusEdge = (current, edge) => {
-      const menuEl = current.closest('ul[role="menu"]');
-      if (!menuEl) return;
-      const items = getMenuButtonsWithin(menuEl);
-      if (items.length === 0) return;
-      roveFocus(current, edge === "start" ? items[0] : items[items.length - 1]);
-    };
-    const focusFirstChildItem = async () => {
+    const focusFirstChild = async () => {
       await vue.nextTick();
       const titleEl = document.activeElement;
-      const li = titleEl?.closest("li");
-      const submenu = li?.querySelector('ul[role="menu"]');
-      if (!submenu) return;
-      const items = getMenuButtonsWithin(submenu);
-      if (items.length === 0) return;
-      items.forEach((el, idx) => {
-        el.tabIndex = idx === 0 ? 0 : -1;
-      });
-      items[0].focus();
+      if (titleEl) tigercatCore.focusFirstChildItem(titleEl);
     };
     const handleTitleKeyDown = async (event) => {
       if (!menuContext || props.disabled) return;
       const current = event.currentTarget;
       const rootMenu = current.closest('ul[role="menu"]');
       const isRoot = rootMenu?.dataset.tigerMenuRoot === "true";
-      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
+      const isHorizontalRoot = isRoot && menuContext.mode.value === "horizontal";
       const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
       const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
       if (event.key === nextKey) {
         event.preventDefault();
-        moveFocus(current, 1);
+        tigercatCore.moveFocusInMenu(current, 1);
         return;
       }
       if (event.key === prevKey) {
         event.preventDefault();
-        moveFocus(current, -1);
+        tigercatCore.moveFocusInMenu(current, -1);
         return;
       }
       if (event.key === "Home") {
         event.preventDefault();
-        focusEdge(current, "start");
+        tigercatCore.focusMenuEdge(current, "start");
         return;
       }
       if (event.key === "End") {
         event.preventDefault();
-        focusEdge(current, "end");
+        tigercatCore.focusMenuEdge(current, "end");
         return;
       }
       if (event.key === "Escape" || event.key === "ArrowLeft") {
-        if (menuContext.mode === "horizontal" || isPopup.value) {
+        if (menuContext.mode.value === "horizontal" || isPopup.value) {
           event.preventDefault();
           isOpenByKeyboard.value = false;
           isHovered.value = false;
@@ -216,16 +175,16 @@ var SubMenu = vue.defineComponent({
       }
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
-        if (menuContext.mode === "horizontal" || isPopup.value) {
+        if (menuContext.mode.value === "horizontal" || isPopup.value) {
           isOpenByKeyboard.value = true;
           return;
         }
         menuContext.handleOpenChange(props.itemKey);
-        await focusFirstChildItem();
+        await focusFirstChild();
         return;
       }
       if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-        if (menuContext.mode === "horizontal" || isPopup.value) {
+        if (menuContext.mode.value === "horizontal" || isPopup.value) {
           event.preventDefault();
           isOpenByKeyboard.value = true;
           return;
@@ -233,26 +192,26 @@ var SubMenu = vue.defineComponent({
         if (!isOpen.value) {
           event.preventDefault();
           menuContext.handleOpenChange(props.itemKey);
-          await focusFirstChildItem();
+          await focusFirstChild();
         }
       }
     };
     const handleMouseEnter = () => {
-      if (menuContext?.mode === "horizontal" || isPopup.value) {
+      if (menuContext?.mode.value === "horizontal" || isPopup.value) {
         isHovered.value = true;
       }
     };
     const handleMouseLeave = () => {
-      if (menuContext?.mode === "horizontal" || isPopup.value) {
+      if (menuContext?.mode.value === "horizontal" || isPopup.value) {
         isHovered.value = false;
         isOpenByKeyboard.value = false;
       }
     };
     const indentStyle = vue.computed(() => {
-      if (!menuContext || menuContext.mode !== "inline" || props.level === 0) {
+      if (!menuContext || menuContext.mode.value !== "inline" || props.level === 0) {
         return {};
       }
-      return tigercatCore.getMenuItemIndent(props.level, menuContext.inlineIndent);
+      return tigercatCore.getMenuItemIndent(props.level, menuContext.inlineIndent.value);
     });
     const withChildLevel = (nodes) => {
       if (!nodes || nodes.length === 0) return nodes;
@@ -290,7 +249,7 @@ var SubMenu = vue.defineComponent({
       }
       if (!effectiveCollapsed.value) {
         titleChildren.push(vue.h("span", { class: "flex-1" }, props.title));
-        if (menuContext.mode !== "horizontal" && !isPopup.value) {
+        if (menuContext.mode.value !== "horizontal" && !isPopup.value) {
           titleChildren.push(ExpandIcon(isExpanded.value));
         }
       } else if (!props.icon) {
@@ -317,7 +276,7 @@ var SubMenu = vue.defineComponent({
         },
         titleChildren
       );
-      const contentNode = menuContext.mode === "horizontal" || isPopup.value ? vue.h(
+      const contentNode = menuContext.mode.value === "horizontal" || isPopup.value ? vue.h(
         "ul",
         {
           class: contentClasses.value,
@@ -367,7 +326,7 @@ var SubMenu = vue.defineComponent({
       return vue.h(
         "li",
         {
-          class: menuContext.mode === "horizontal" || isPopup.value ? "relative" : "",
+          class: menuContext.mode.value === "horizontal" || isPopup.value ? "relative" : "",
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
           role: "none"

package/dist/{chunk-HSXPJCRK.js → chunk-KVZLGW45.js}

@@ -40,26 +40,26 @@ var Sidebar = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const attrsRecord = attrs;
     const sidebarClasses = vue.computed(
-      () => tigercatCore.classNames(tigercatCore.layoutSidebarClasses, props.className, tigercatCore.coerceClassValue(attrsRecord.class))
+      () => tigercatCore.classNames(
+        tigercatCore.layoutSidebarClasses,
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
     );
     const sidebarStyle = vue.computed(() => ({
       width: props.collapsed ? "0px" : props.width,
-      minWidth: props.collapsed ? "0px" : props.width,
-      overflow: "hidden"
+      minWidth: props.collapsed ? "0px" : props.width
     }));
-    return () => {
-      return vue.h(
-        "aside",
-        {
-          ...attrs,
-          class: sidebarClasses.value,
-          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style, sidebarStyle.value)
-        },
-        !props.collapsed && slots.default?.()
-      );
-    };
+    return () => vue.h(
+      "aside",
+      {
+        ...attrs,
+        class: sidebarClasses.value,
+        style: tigercatCore.mergeStyleValues(props.style, sidebarStyle.value)
+      },
+      !props.collapsed && slots.default?.()
+    );
   }
 });
 var Sidebar_default = Sidebar;

package/dist/{chunk-YLILPFDU.js → chunk-LAAPLTP3.js}

@@ -60,9 +60,6 @@ var Switch = vue.defineComponent({
       emit("update:checked", newValue);
       emit("change", newValue);
     };
-    const handleClick = () => {
-      emitChange();
-    };
     const handleKeyDown = (event) => {
       if (props.disabled) return;
       if (event.key === " " || event.key === "Enter") {
@@ -79,10 +76,10 @@ var Switch = vue.defineComponent({
         "aria-checked": props.checked,
         "aria-disabled": props.disabled ? "true" : void 0,
         class: [switchClasses.value, attrs.class],
-        style: [props.style, attrs.style],
+        style: props.style,
         disabled: props.disabled,
         tabindex: props.disabled ? -1 : attrs.tabindex,
-        onClick: handleClick,
+        onClick: emitChange,
         onKeydown: handleKeyDown
       },
       [

package/dist/{chunk-ZCPYALXT.mjs → chunk-LBGTABIU.mjs}

@@ -106,8 +106,8 @@ var Timeline = defineComponent({
       const isLast = index === processedItems.value.length - 1 && !props.pending;
       const position = item.position;
       const itemClasses = getTimelineItemClasses(props.mode, position, isLast);
-      const tailClasses = getTimelineTailClasses(props.mode, position, isLast);
-      const headClasses = getTimelineHeadClasses(props.mode, position);
+      const tailClasses = getTimelineTailClasses(props.mode, isLast);
+      const headClasses = getTimelineHeadClasses(props.mode);
       const contentClasses = getTimelineContentClasses(props.mode, position);
       if (slots.item) {
         return h("li", { key, class: itemClasses }, [
@@ -136,7 +136,7 @@ var Timeline = defineComponent({
       const index = processedItems.value.length;
       const position = props.mode === "alternate" ? index % 2 === 0 ? "left" : "right" : void 0;
       const itemClasses = getTimelineItemClasses(props.mode, position, true);
-      const headClasses = getTimelineHeadClasses(props.mode, position);
+      const headClasses = getTimelineHeadClasses(props.mode);
       const contentClasses = getTimelineContentClasses(props.mode, position);
       if (slots.pending) {
         return h("li", { key: "pending", class: itemClasses }, [

package/dist/chunk-LDCTSE6Y.mjs

@@ -0,0 +1,60 @@
+import { init_ImagePreview, ImagePreview } from './chunk-MMQ34S5M.mjs';
+import { defineComponent, ref, provide, onBeforeUnmount, h } from 'vue';
+
+// src/components/ImageGroup.ts
+init_ImagePreview();
+var IMAGE_GROUP_INJECTION_KEY = "tiger-image-group";
+var ImageGroup = defineComponent({
+  name: "TigerImageGroup",
+  props: {
+    preview: { type: Boolean, default: true }
+  },
+  emits: ["preview-visible-change"],
+  setup(props, { slots, emit }) {
+    const images = ref([]);
+    const previewVisible = ref(false);
+    const previewIndex = ref(0);
+    const context = {
+      register(src) {
+        const idx = images.value.length;
+        images.value.push(src);
+        return idx;
+      },
+      unregister(src) {
+        const idx = images.value.indexOf(src);
+        if (idx > -1) {
+          images.value.splice(idx, 1);
+        }
+      },
+      openPreview(index) {
+        if (!props.preview) return;
+        previewIndex.value = index;
+        previewVisible.value = true;
+        emit("preview-visible-change", true);
+      }
+    };
+    provide(IMAGE_GROUP_INJECTION_KEY, context);
+    onBeforeUnmount(() => {
+      images.value = [];
+    });
+    return () => {
+      const children = slots.default?.();
+      const preview = props.preview ? h(ImagePreview, {
+        visible: previewVisible.value,
+        images: images.value,
+        currentIndex: previewIndex.value,
+        "onUpdate:visible": (val) => {
+          previewVisible.value = val;
+          if (!val) emit("preview-visible-change", false);
+        },
+        "onUpdate:currentIndex": (val) => {
+          previewIndex.value = val;
+        }
+      }) : null;
+      return h("div", { class: "tiger-image-group", role: "group" }, [children, preview]);
+    };
+  }
+});
+var ImageGroup_default = ImageGroup;
+
+export { IMAGE_GROUP_INJECTION_KEY, ImageGroup, ImageGroup_default };