@ticatec/uniface-element 0.2.3 → 0.3.0

package/dist/context-menu/ContextMenu.svelte

@@ -4,16 +4,20 @@
     import {onMount, onDestroy, tick} from 'svelte';
     import type {ContextMenuItem} from "./ContextMenuItem";
 
-    let items: Array<ContextMenuItem> = [];  // 菜单项，应该是一个数组
-    let menuWidth = 150; // 菜单的宽度
-    let menuHeight = 150; // 菜单的高度
+    export let onfocus: ((event: FocusEvent) => void) | null = null;
+    export let onblur: ((event: FocusEvent) => void) | null = null;
+    export let onhide: (() => void) | null = null;
 
+    let items: Array<ContextMenuItem> = [];
+    let menuWidth = 150;
+    let menuHeight = 150;
     let menuVisible = false;
     let menuPosition = {x: 0, y: 0};
+    let focusedIndex = -1;
+    let menuPanel: HTMLDivElement;
 
-    // 处理右键点击事件
     export const show = async (event: MouseEvent, list: Array<ContextMenuItem>, width: number = 150, height: number = 150) => {
-        event.preventDefault(); // 阻止默认的右键菜单
+        event.preventDefault();
 
         if (menuVisible) {
             menuVisible = false;
@@ -26,12 +30,11 @@
         items = list;
         menuWidth = width;
         menuHeight = height;
+        focusedIndex = -1;
 
-        // 获取视窗宽高
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
 
-        // 判断右键点击位置，调整菜单位置
         if (x + menuWidth > windowWidth) {
             x = windowWidth - menuWidth;
         }
@@ -42,42 +45,156 @@
 
         menuPosition = {x, y};
         menuVisible = true;
-    }
 
+        await tick();
+        if (menuPanel) {
+            menuPanel.focus();
+            onfocus?.(new FocusEvent('focus'));
+        }
+    }
 
+    export const hide = () => {
+        if (menuVisible) {
+            menuVisible = false;
+            focusedIndex = -1;
+            onhide?.();
+            onblur?.(new FocusEvent('blur'));
+        }
+    }
 
-    // 在页面其他地方点击时隐藏菜单
     const handleClickOutside = (event: MouseEvent) => {
         if (menuPanel && !menuPanel.contains(event.target as Node)) {
             event.stopPropagation();
             event.preventDefault();
-            menuVisible = false;
+            hide();
         }
     }
 
-    let menuPanel: any;
+    const handleKeyDown = (event: KeyboardEvent) => {
+        if (!menuVisible) return;
+
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                hide();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                moveSelection(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                moveSelection(-1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (focusedIndex >= 0) {
+                    executeItem(items[focusedIndex]);
+                }
+                break;
+        }
+    }
+
+    const moveSelection = (direction: number) => {
+        const enabledItems = items.filter((item, index) => !item.disabled && !item.separator);
+        if (enabledItems.length === 0) return;
+
+        let currentEnabledIndex = -1;
+        if (focusedIndex >= 0) {
+            const currentItem = items[focusedIndex];
+            currentEnabledIndex = enabledItems.findIndex(item => item === currentItem);
+        }
+
+        let newEnabledIndex = currentEnabledIndex + direction;
+        if (newEnabledIndex < 0) {
+            newEnabledIndex = enabledItems.length - 1;
+        } else if (newEnabledIndex >= enabledItems.length) {
+            newEnabledIndex = 0;
+        }
+
+        const newItem = enabledItems[newEnabledIndex];
+        focusedIndex = items.findIndex(item => item === newItem);
+    }
+
+    const executeItem = (item: ContextMenuItem) => {
+        if (!item.disabled && !item.separator && item.action) {
+            item.action();
+            hide();
+        }
+    }
+
+    const handleMenuItemClick = (item: ContextMenuItem, index: number) => (event: MouseEvent) => {
+        if (item.disabled || item.separator) {
+            event.preventDefault();
+            return;
+        }
+        focusedIndex = index;
+        executeItem(item);
+    }
+
+    const handleMenuItemMouseEnter = (index: number) => () => {
+        if (!items[index].disabled && !items[index].separator) {
+            focusedIndex = index;
+        }
+    }
+
+    const handleMenuFocus = (event: FocusEvent) => {
+        onfocus?.(event);
+    }
+
+    const handleMenuBlur = (event: FocusEvent) => {
+        setTimeout(() => {
+            if (!menuPanel?.contains(document.activeElement)) {
+                hide();
+            }
+        }, 0);
+    }
 
     onMount(() => {
         window.addEventListener('click', handleClickOutside);
+        window.addEventListener('keydown', handleKeyDown);
     });
 
     onDestroy(() => {
         window.removeEventListener('click', handleClickOutside);
+        window.removeEventListener('keydown', handleKeyDown);
     });
-
-    const handleMenuItemClick = (item: ContextMenuItem) => (event: MouseEvent) => {
-        item.action?.();
-        menuVisible = false;
-    }
 </script>
 
 {#if menuVisible}
 <Portal>
-    <div bind:this={menuPanel} class="uniface-context-menu" style="left: {menuPosition.x}px; top: {menuPosition.y}px">
-        {#each items as item}
-            <div class="menu-item" on:click={handleMenuItemClick(item)} aria-hidden="true">
-                {item.text}
-            </div>
+    <div 
+        bind:this={menuPanel} 
+        class="uniface-context-menu" 
+        style="left: {menuPosition.x}px; top: {menuPosition.y}px"
+        role="menu"
+        tabindex="-1"
+        aria-label="Context menu"
+        on:focus={handleMenuFocus}
+        on:blur={handleMenuBlur}
+    >
+        {#each items as item, index}
+            {#if item.separator}
+                <div class="menu-separator" role="separator" aria-hidden="true"></div>
+            {:else}
+                <div 
+                    class="menu-item" 
+                    class:disabled={item.disabled}
+                    class:focused={focusedIndex === index}
+                    style={item.style || ''}
+                    role="menuitem"
+                    tabindex="-1"
+                    aria-disabled={item.disabled}
+                    on:click={handleMenuItemClick(item, index)}
+                    on:mouseenter={handleMenuItemMouseEnter(index)}
+                >
+                    {#if item.icon}
+                        <span class="menu-item-icon {item.icon}"></span>
+                    {/if}
+                    <span class="menu-item-text">{item.text}</span>
+                </div>
+            {/if}
         {/each}
     </div>
 </Portal>

package/dist/context-menu/ContextMenu.svelte.d.ts

@@ -13,11 +13,16 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const ContextMenu: $$__sveltets_2_IsomorphicComponent<{
+    onfocus?: ((event: FocusEvent) => void) | null;
+    onblur?: ((event: FocusEvent) => void) | null;
+    onhide?: (() => void) | null;
     show?: (event: MouseEvent, list: Array<ContextMenuItem>, width?: number, height?: number) => Promise<void>;
+    hide?: () => void;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     show: (event: MouseEvent, list: Array<ContextMenuItem>, width?: number, height?: number) => Promise<void>;
+    hide: () => void;
 }, string>;
 type ContextMenu = InstanceType<typeof ContextMenu>;
 export default ContextMenu;

package/dist/context-menu/ContextMenuItem.d.ts

@@ -1,15 +1,31 @@
 export type ActionCallback = () => void;
 export interface ContextMenuItem {
     /**
-     *
+     * Display text for the menu item
      */
     text: string;
     /**
-     *
+     * Action to execute when item is clicked
      */
-    action: ActionCallback;
+    action?: ActionCallback;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether this is a separator item
+     */
+    separator?: boolean;
+    /**
+     * Icon class or name for the menu item
+     */
+    icon?: string;
+    /**
+     * Custom CSS styles for the item
+     */
+    style?: string;
 }
 /**
- *
+ * Context menu event handler type
  */
 export type OnContextMenu = (event: MouseEvent, data: any) => void;