aleman 1.2.2 → 1.2.4

package/ChangeLog

@@ -1,3 +1,15 @@
+2025.09.03, v1.2.4
+
+feature:
+- 85e38ec aleman: menu: navigate submenu
+- 0139ee8 menu: rules: submenu: add
+- 355896c aleman: menu: show submenu
+
+2025.09.03, v1.2.3
+
+feature:
+- ae911f9 aleman: menu: key -> keys
+
 2025.09.02, v1.2.2
 
 fix:

package/aleman/add-listeners.js

@@ -63,7 +63,7 @@ export const addGlobalListeners = ({globalAddons, options, readState, writeState
 
 const createListener = ({options, addon, readState, writeState}) => (event) => {
     const {
-        key,
+        keys,
         listener,
         preventDefault,
         stopPropagation,
@@ -72,7 +72,7 @@ const createListener = ({options, addon, readState, writeState}) => (event) => {
         afterIf,
     } = addon;
     
-    if (key && event.key !== key)
+    if (keys && !keys.includes(event.key))
         return;
     
     const state = readState();

package/aleman/index.js

@@ -6,8 +6,6 @@ import {
 } from './add-listeners.js';
 import {createRender} from './render.js';
 
-const id = (a) => a;
-
 export const hydrate = (element, config) => {
     const {
         addons,

package/menu/README.md

@@ -7,6 +7,7 @@
 - ✅[`unselect-all`](https://putout.cloudcmd.io/#/gist/ca24f199f508cccb34b11baf726eba83/96f08fa91331ac6265d9f5ff48692c9d4ad1b98b);
 - ✅[`build-menu`](https://putout.cloudcmd.io/#/gist/329dccd5fdc7f8b220be79af405dc9bb/b56df53f52bbe2a300ede38a96d1d2242e60679f);
 - ✅[`set-position`](https://putout.cloudcmd.io/#/gist/215bb4654a27f15235f3e380a3035138/7f4af88aaa4863be4f1b8a90b9f0f4b1cf4744a0);
+- ✅[`submenu`](https://putout.cloudcmd.io/#/gist/b0a3b64d14f3497869a345e7e438d66e/feb671c4a59a555ff408af92fab602bae3a94e2f);
 
 ## License
 

package/menu/addons/context-menu.js

@@ -1,15 +1,13 @@
 import {setPosition} from './set-position.js';
 
-export const createContextMenu = (name) => {
-    return {
-        name,
-        events,
-        preventDefault,
-        after,
-        afterIf,
-        listener,
-    };
-};
+export const createContextMenu = (name) => ({
+    name,
+    events,
+    preventDefault,
+    after,
+    afterIf,
+    listener,
+});
 
 const events = [
     'contextmenu',
@@ -17,7 +15,7 @@ const events = [
 
 const preventDefault = true;
 
-const listener = ({event, state, options, writeState}) => {
+const listener = ({event, state, options}) => {
     const {beforeShow} = options;
     const {x, y} = {
         x: event.clientX,
@@ -48,6 +46,4 @@ const after = ({event, options}) => {
     return setPosition(name, event);
 };
 
-const afterIf = ({state}) => {
-    return state.command === 'show';
-};
+const afterIf = ({state}) => state.command === 'show';

package/menu/addons/down.js

@@ -1,17 +1,34 @@
-const {keys} = Object;
+import {getSubmenu} from './submenu/index.js';
 
-export const key = 'ArrowDown';
+export const keys = [
+    'ArrowDown',
+    'j',
+];
 export const preventDefault = true;
 
 export const listener = ({state, options}) => {
-    let {index} = state;
+    let {
+        index,
+        insideSubmenu,
+        submenuIndex,
+    } = state;
+    
     const {menu} = options;
-    const n = keys(menu).length - 1;
+    const n = Object.keys(menu).length - 1;
+    const submenu = getSubmenu({
+        state,
+        options,
+    });
+    const submenuCount = Object.keys(submenu).length - 1;
     
-    if (index < n)
+    if (!insideSubmenu && index < n)
         ++index;
     
+    if (insideSubmenu && submenuIndex < submenuCount)
+        ++submenuIndex;
+    
     return {
         index,
+        submenuIndex,
     };
 };

package/menu/addons/enter.js

@@ -1,6 +1,6 @@
 const {values} = Object;
 
-export const key = 'Enter';
+export const keys = ['Enter'];
 
 export const filter = ({state}) => state.command === 'show';
 

package/menu/addons/escape.js

@@ -1,4 +1,4 @@
-export const key = 'Escape';
+export const keys = ['Escape'];
 
 export const listener = ({state, options}) => {
     options.beforeHide?.(state);

package/menu/addons/index.js

@@ -3,6 +3,8 @@ import * as escape from './escape.js';
 import * as down from './down.js';
 import * as up from './up.js';
 import * as enter from './enter.js';
+import * as left from './left.js';
+import * as right from './right.js';
 
 export const addons = [
     click,
@@ -10,4 +12,6 @@ export const addons = [
     down,
     up,
     enter,
+    left,
+    right,
 ];

package/menu/addons/item-click.js

@@ -20,4 +20,3 @@ const listener = ({event, options}) => {
         command: 'hide',
     };
 };
-

package/menu/addons/left.js

@@ -0,0 +1,10 @@
+export const keys = [
+    'ArrowLeft',
+    'h',
+];
+export const preventDefault = true;
+
+export const listener = () => ({
+    submenuIndex: 0,
+    insideSubmenu: false,
+});

package/menu/addons/right.js

@@ -0,0 +1,20 @@
+import {getSubmenu} from './submenu/index.js';
+
+export const keys = [
+    'ArrowRight',
+    'l',
+];
+export const preventDefault = true;
+
+export const filter = ({state, options}) => {
+    const submenu = getSubmenu({
+        state,
+        options,
+    });
+    return Object.keys(submenu).length;
+};
+
+export const listener = () => ({
+    submenuIndex: 0,
+    insideSubmenu: true,
+});

package/menu/addons/set-position.js

@@ -48,4 +48,3 @@ function getMenuWidth(element) {
     const {width} = getComputedStyle(element);
     return parseInt(width, 10);
 }
-

package/menu/addons/submenu/index.js

@@ -0,0 +1,13 @@
+const isObject = (a) => a && typeof a === 'object';
+
+export function getSubmenu({state, options}) {
+    const {index} = state;
+    const {menu} = options;
+    const currentName = Object.keys(menu)[index];
+    const submenu = menu[currentName];
+    
+    if (isObject(submenu))
+        return submenu;
+    
+    return {};
+}

package/menu/addons/up.js

@@ -1,14 +1,24 @@
-export const key = 'ArrowUp';
+export const keys = [
+    'ArrowUp',
+    'k',
+];
 
 export const preventDefault = true;
 
 export const listener = ({state}) => {
-    let {index} = state;
+    let {
+        index,
+        insideSubmenu,
+        submenuIndex,
+    } = state;
     
-    if (index)
+    if (insideSubmenu)
+        --submenuIndex;
+    else
         --index;
     
     return {
         index,
+        submenuIndex,
     };
 };

package/menu/hydrate-menu.js

@@ -18,6 +18,7 @@ export const hydrateMenu = (elementName, {hydrateElement, options, menu}) => {
     const {name} = options;
     const state = initState(options);
     const contextMenu = createContextMenu(elementName);
+    
     const {run} = hydrate(hydrateElement, {
         options,
         state,

package/menu/menu.css

@@ -50,6 +50,10 @@
     display: block;
 }
 
+.menu-item-selected > .menu,.menu-item:hover > .menu  {
+    display: block;
+}
+
 .menu-submenu > label::after {
     display: block;
     float: right;

package/menu/rules/build-menu/fixture/build-menu-fix.js

@@ -1 +1 @@
-<ul data-name="menu" class="menu menu-hidden"><li data-name='menu-item' className='menu-item'><label data-menu-path='hello'>hello</label></li><li data-name='menu-item' className='menu-item'><label data-menu-path='world'>world</label></li></ul>;
+<ul data-name="menu" class="menu menu-hidden"><li data-name='menu-item' className='menu-item' data-menu-path='hello'><label data-menu-path='hello'>hello</label></li><li data-name='menu-item' className='menu-item' data-menu-path='world'><label data-menu-path='world'>world</label></li></ul>;

package/menu/rules/build-menu/fixture/icon-fix.js

@@ -1 +1 @@
-<ul data-name="menu" class="menu menu-hidden"><li data-name='menu-item' className="menu-item icon icon-hello"><label data-menu-path='hello'>hello</label></li><li data-name='menu-item' className="menu-item icon icon-world"><label data-menu-path='world'>world</label></li></ul>;
+<ul data-name="menu" class="menu menu-hidden"><li data-name='menu-item' className="menu-item icon icon-hello" data-menu-path='hello'><label data-menu-path='hello'>hello</label></li><li data-name='menu-item' className="menu-item icon icon-world" data-menu-path='world'><label data-menu-path='world'>world</label></li></ul>;

package/menu/rules/build-menu/fixture/nested-fix.js

@@ -1 +1 @@
-<ul data-name="menu" class="menu menu-hidden"><li data-name='menu-item' className='menu-item icon icon-hello menu-submenu'><label data-menu-path='hello'>hello</label><ul data-name='menu' className='menu menu-hidden'><li data-name='menu-item' className="menu-item icon icon-world"><label data-menu-path='hello.world'>world</label></li></ul></li></ul>;
+<ul data-name="menu" class="menu menu-hidden"><li data-name='menu-item' className='menu-item icon icon-hello menu-submenu' data-menu-path='hello'><label data-menu-path='hello'>hello</label><ul data-name='menu' className='menu menu-hidden'><li data-name='menu-item' className="menu-item icon icon-world" data-menu-path='hello.world'><label data-menu-path='hello.world'>world</label></li></ul></li></ul>;

package/menu/rules/build-menu/index.js

@@ -119,4 +119,3 @@ function getIconName(name) {
         .replace(/\s/g, '-')
         .toLowerCase();
 }
-

package/menu/rules/index.js

@@ -1,3 +1,4 @@
+import * as submenu from './submenu/index.js';
 import * as setPosition from './set-position/index.js';
 import * as buildMenu from './build-menu/index.js';
 import * as menu from './menu/index.js';
@@ -10,4 +11,5 @@ export const rules = {
     'set-position': setPosition,
     'select': select,
     'select-all': unselectAll,
+    'submenu': submenu,
 };

package/menu/rules/submenu/fixture/submenu-fix.js

@@ -0,0 +1,53 @@
+// second selected
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-menu-path="Upload" data-name="menu-item" className="menu-item icon icon-view">
+    <label data-menu-path="Upload">Upload</label>
+</li>
+    <li data-menu-path="New" data-name="menu-item" className="menu-item icon icon-edit menu-item-selected">
+    <label data-menu-path="New">New</label>
+    <ul data-name="menu" class="menu menu-hidden">
+        <li data-menu-path="New.File" data-name="menu-item" className="menu-item icon icon-view">
+        <label data-menu-path="New.File">File</label>
+    </li>
+        <li data-menu-path="New.Directory" data-name="menu-item" className='menu-item icon icon-edit menu-item-selected'>
+        <label data-menu-path="New.Directory">Directory</label>
+    </li>
+    </ul>
+</li>
+</ul>;
+
+// first selected
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-menu-path="Upload" data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+    <label data-menu-path="Upload">Upload</label>
+</li>
+    <li data-menu-path="New" data-name="menu-item" className="menu-item icon icon-edit">
+    <label data-menu-path="New">New</label>
+    <ul data-name="menu" class="menu menu-hidden">
+        <li data-menu-path="New.File" data-name="menu-item" className="menu-item icon icon-view">
+        <label data-menu-path="New.File">File</label>
+    </li>
+        <li data-menu-path="New.Directory" data-name="menu-item" className="menu-item icon icon-edit">
+        <label data-menu-path="New.Directory">Directory</label>
+    </li>
+    </ul>
+</li>
+</ul>;
+
+// second selected, submenu first selected
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-menu-path="Upload" data-name="menu-item" className="menu-item icon icon-view">
+    <label data-menu-path="Upload">Upload</label>
+</li>
+    <li data-menu-path="New" data-name="menu-item" className="menu-item icon icon-edit menu-item-selected">
+    <label data-menu-path="New">New</label>
+    <ul data-name="menu" class="menu menu-hidden">
+        <li data-menu-path="New.File" data-name="menu-item" className='menu-item icon icon-view'>
+        <label data-menu-path="New.File">File</label>
+    </li>
+        <li data-menu-path="New.Directory" data-name="menu-item" className='menu-item icon icon-edit menu-item-selected'>
+        <label data-menu-path="New.Directory">Directory</label>
+    </li>
+    </ul>
+</li>
+</ul>;

package/menu/rules/submenu/fixture/submenu.js

@@ -0,0 +1,54 @@
+// second selected
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-menu-path="Upload" data-name="menu-item" className="menu-item icon icon-view">
+        <label data-menu-path="Upload">Upload</label>
+    </li>
+    <li data-menu-path="New" data-name="menu-item" className="menu-item icon icon-edit menu-item-selected">
+        <label data-menu-path="New">New</label>
+            <ul data-name="menu" class="menu menu-hidden">
+                <li data-menu-path="New.File" data-name="menu-item" className="menu-item icon icon-view">
+                    <label data-menu-path="New.File">File</label>
+                </li>
+                <li data-menu-path="New.Directory" data-name="menu-item" className="menu-item icon icon-edit">
+                    <label data-menu-path="New.Directory">Directory</label>
+                </li>
+            </ul>
+    </li>
+</ul>;
+
+
+// first selected
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-menu-path="Upload" data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+        <label data-menu-path="Upload">Upload</label>
+    </li>
+    <li data-menu-path="New" data-name="menu-item" className="menu-item icon icon-edit">
+        <label data-menu-path="New">New</label>
+            <ul data-name="menu" class="menu menu-hidden">
+                <li data-menu-path="New.File" data-name="menu-item" className="menu-item icon icon-view">
+                    <label data-menu-path="New.File">File</label>
+                </li>
+                <li data-menu-path="New.Directory" data-name="menu-item" className="menu-item icon icon-edit">
+                    <label data-menu-path="New.Directory">Directory</label>
+                </li>
+            </ul>
+    </li>
+</ul>;
+
+// second selected, submenu first selected
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-menu-path="Upload" data-name="menu-item" className="menu-item icon icon-view">
+        <label data-menu-path="Upload">Upload</label>
+    </li>
+    <li data-menu-path="New" data-name="menu-item" className="menu-item icon icon-edit menu-item-selected">
+        <label data-menu-path="New">New</label>
+            <ul data-name="menu" class="menu menu-hidden">
+                <li data-menu-path="New.File" data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+                    <label data-menu-path="New.File">File</label>
+                </li>
+                <li data-menu-path="New.Directory" data-name="menu-item" className="menu-item icon icon-edit">
+                    <label data-menu-path="New.Directory">Directory</label>
+                </li>
+            </ul>
+    </li>
+</ul>;

package/menu/rules/submenu/index.js

@@ -0,0 +1,120 @@
+import {operator, types} from 'putout';
+
+const {isJSXElement} = types;
+const {setLiteralValue} = operator;
+
+export const report = () => `Select right`;
+
+export const fix = ({path, prev, next, insideSubmenu}) => {
+    const {value} = path.node;
+    unselect(prev);
+    unselect(next);
+    
+    if (!insideSubmenu) {
+        const newValue = value.value.replace(/\s?menu-item-selected/, '');
+        setLiteralValue(value, newValue);
+        
+        return;
+    }
+    
+    const newValue = `${value.value} menu-item-selected`;
+    setLiteralValue(value, newValue);
+};
+
+export const traverse = ({options, push}) => ({
+    JSXOpeningElement(path) {
+        if (path.node.name.name !== 'li')
+            return;
+        
+        const {insideSubmenu = true, submenuIndex = 1} = options;
+        const parentMenu = path.parentPath.parentPath.parentPath;
+        
+        if (!isJSXElement(parentMenu))
+            return;
+        
+        if (!isParentSelected(parentMenu))
+            return;
+        
+        if (!isJSXElement(path.parentPath.parentPath))
+            return;
+        
+        if (!checkDataName(path.parentPath.parentPath))
+            return;
+        
+        const children = path.parentPath
+            .parentPath
+            .get('children')
+            .filter(isJSXElement);
+        
+        const prev = children[submenuIndex - 1];
+        const current = children[submenuIndex];
+        const next = children[submenuIndex + 1];
+        
+        if (!current)
+            return;
+        
+        for (const attr of current.get('openingElement.attributes')) {
+            const {name, value} = attr.node;
+            
+            if (name.name !== 'className')
+                continue;
+            
+            if (insideSubmenu && !value.value.includes('menu-item-selected'))
+                push({
+                    path: attr,
+                    insideSubmenu,
+                    prev,
+                    next,
+                });
+            
+            if (!insideSubmenu && value.value.includes('menu-item-selected'))
+                push({
+                    path: attr,
+                    insideSubmenu,
+                    prev,
+                    next,
+                });
+        }
+    },
+});
+
+function checkDataName(path) {
+    const attributes = path.get('openingElement.attributes');
+    
+    for (const attr of attributes) {
+        const {name, value} = attr.node;
+        
+        if (name.name === 'data-name')
+            return value.value === 'menu';
+    }
+    
+    return false;
+}
+
+function isParentSelected(path) {
+    const attributes = path.get('openingElement.attributes');
+    
+    for (const attr of attributes) {
+        const {name, value} = attr.node;
+        
+        if (name.name === 'className')
+            return value.value.includes('menu-item-selected');
+    }
+    
+    return false;
+}
+
+function unselect(path) {
+    if (!path)
+        return;
+    
+    for (const attr of path.get('openingElement.attributes')) {
+        const {name, value} = attr.node;
+        
+        if (name.name !== 'className')
+            continue;
+        
+        if (value.value.includes('menu-item-selected'))
+            setLiteralValue(value, value.value.replace(' menu-item-selected', ''));
+    }
+}

package/menu/state.js

@@ -6,6 +6,8 @@ export const initState = ({menu, name = 'menu'}) => {
     return {
         name,
         command: 'hide',
+        insideSubmenu: false,
+        submenuIndex: 0,
         index: -1,
         count,
         position: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aleman",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "type": "module",
   "author": "coderaiser <mnemonic.enemy@gmail.com> (https://github.com/coderaiser)",
   "description": "🐊Putout-based framework for web",