aleman 1.2.6 → 1.3.0

package/ChangeLog

@@ -1,3 +1,15 @@
+2025.09.04, v1.3.0
+
+feature:
+- 42707d3 rules: unselect-all: add
+- ed5c1a6 rules: submenu
+- 7776881 menu: left: close submenu
+
+2025.09.04, v1.2.7
+
+feature:
+- 05de054 aleman: menu: from bottom
+
 2025.09.04, v1.2.6
 
 fix:

package/menu/addons/click.js

@@ -8,5 +8,6 @@ export const listener = ({options, state}) => {
     return {
         command: 'hide',
         index: -1,
+        showSubmenu: false,
     };
 };

package/menu/addons/context-menu.js

@@ -34,6 +34,7 @@ const listener = ({event, state, options}) => {
     
     return {
         command,
+        showSubmenu: false,
         position: {
             x,
             y: y - 14,

package/menu/addons/down.js

@@ -6,6 +6,8 @@ export const keys = [
 ];
 export const preventDefault = true;
 
+export const filter = ({state}) => state.command === 'show';
+
 export const listener = ({state, options}) => {
     let {
         index,
@@ -15,20 +17,25 @@ export const listener = ({state, options}) => {
     
     const {menu} = options;
     const n = Object.keys(menu).length - 1;
+    
+    if (!insideSubmenu && index < n)
+        ++index;
+    
     const submenu = getSubmenu({
-        state,
+        index,
         options,
     });
-    const submenuCount = Object.keys(submenu).length - 1;
     
-    if (!insideSubmenu && index < n)
-        ++index;
+    const submenuCount = Object.keys(submenu).length - 1;
     
     if (insideSubmenu && submenuIndex < submenuCount)
         ++submenuIndex;
     
+    const showSubmenu = submenuCount > -1;
+    
     return {
         index,
         submenuIndex,
+        showSubmenu,
     };
 };

package/menu/addons/enter.js

@@ -1,8 +1,5 @@
 import {run} from './run/index.js';
 
-const isObject = (a) => a && typeof a === 'object';
-const {values} = Object;
-
 export const keys = ['Enter'];
 
 export const filter = ({state}) => state.command === 'show';
@@ -22,4 +19,3 @@ export const listener = ({options, state}) => {
         insideSubmenu: false,
     };
 };
-

package/menu/addons/escape.js

@@ -4,6 +4,7 @@ export const listener = ({state, options}) => {
     options.beforeHide?.(state);
     return {
         command: 'hide',
+        showSubmenu: false,
         index: -1,
     };
 };

package/menu/addons/item-click.js

@@ -18,5 +18,6 @@ const listener = ({event, options}) => {
     return {
         index: -1,
         command: 'hide',
+        showSubmenu: false,
     };
 };

package/menu/addons/left.js

@@ -7,4 +7,5 @@ export const preventDefault = true;
 export const listener = () => ({
     submenuIndex: 0,
     insideSubmenu: false,
+    showSubmenu: false,
 });

package/menu/addons/right.js

@@ -7,14 +7,17 @@ export const keys = [
 export const preventDefault = true;
 
 export const filter = ({state, options}) => {
+    const {index} = state;
     const submenu = getSubmenu({
-        state,
+        index,
         options,
     });
+    
     return Object.keys(submenu).length;
 };
 
 export const listener = () => ({
     submenuIndex: 0,
     insideSubmenu: true,
+    showSubmenu: true,
 });

package/menu/addons/submenu/index.js

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

package/menu/addons/up.js

@@ -1,3 +1,5 @@
+import {getSubmenu} from './submenu/index.js';
+
 export const keys = [
     'ArrowUp',
     'k',
@@ -5,20 +7,37 @@ export const keys = [
 
 export const preventDefault = true;
 
-export const listener = ({state}) => {
+export const listener = ({state, options}) => {
+    const {menu} = options;
     let {
         index,
         insideSubmenu,
         submenuIndex,
     } = state;
     
-    if (insideSubmenu)
+    const count = Object.keys(menu).length;
+    
+    if (insideSubmenu && submenuIndex > 0)
         --submenuIndex;
-    else
+    
+    if (!insideSubmenu && index > 0)
         --index;
     
+    if (index === -1)
+        index = count - 1;
+    
+    const submenu = getSubmenu({
+        index,
+        options,
+    });
+    
+    const submenuCount = Object.keys(submenu).length;
+    
+    const showSubmenu = submenuCount > 0;
+    
     return {
         index,
         submenuIndex,
+        showSubmenu,
     };
 };

package/menu/menu.css

@@ -46,11 +46,7 @@
     display: none;
 }
 
-.menu-item:hover > .menu {
-    display: block;
-}
-
-.menu-item-selected > .menu,.menu-item:hover > .menu  {
+.menu-submenu-show > .menu, .menu-item:hover > .menu  {
     display: block;
 }
 

package/menu/rules/index.js

@@ -10,6 +10,6 @@ export const rules = {
     'build-menu': buildMenu,
     'set-position': setPosition,
     'select': select,
-    'select-all': unselectAll,
+    'unselect-all': unselectAll,
     'submenu': submenu,
 };

package/menu/rules/select/index.js

@@ -6,17 +6,29 @@ const {setLiteralValue} = operator;
 
 export const report = () => `Select item`;
 
-export const fix = ({path, prev, next}) => {
+export const fix = ({path, current, prev, next, showSubmenu}) => {
     const {value} = path.node;
-    setLiteralValue(value, `${value.value} menu-item-selected`);
+    
+    if (!value.value.includes('menu-item-selected'))
+        setLiteralValue(value, `${value.value} menu-item-selected`);
+    
+    addShowSubmenu(current, {
+        showSubmenu,
+    });
     
     unselect(prev);
     unselect(next);
+    removeShowSubmenu(next);
+    removeShowSubmenu(prev);
 };
 
 export const traverse = ({options, push}) => ({
     JSXOpeningElement(path) {
-        const {name = 'menu', index = 1} = options;
+        const {
+            name = 'menu',
+            index = 1,
+            showSubmenu,
+        } = options;
         
         if (path.node.name.name !== 'li')
             return;
@@ -42,19 +54,19 @@ export const traverse = ({options, push}) => ({
             return;
         
         for (const attr of current.get('openingElement.attributes')) {
-            const {name, value} = attr.node;
+            const {name} = attr.node;
             
             if (name.name !== 'className')
                 continue;
             
-            if (!value.value.includes('menu-item-selected')) {
-                push({
-                    path: attr,
-                    prev,
-                    next,
-                });
-                break;
-            }
+            push({
+                path: attr,
+                current,
+                prev,
+                next,
+                showSubmenu,
+            });
+            break;
         }
     },
 });
@@ -73,3 +85,43 @@ function unselect(path) {
             setLiteralValue(value, value.value.replace(' menu-item-selected', ''));
     }
 }
+
+function addShowSubmenu(path, {showSubmenu}) {
+    for (const attr of path.get('openingElement.attributes')) {
+        const {name, value} = attr.node;
+        
+        if (name.name !== 'className')
+            continue;
+        
+        const currentValue = value.value;
+        
+        if (showSubmenu && !currentValue.includes('menu-submenu-show')) {
+            setLiteralValue(value, `${currentValue} menu-submenu-show`);
+            break;
+        }
+        
+        if (!showSubmenu && currentValue.includes('menu-submenu-show')) {
+            setLiteralValue(value, currentValue.replace('menu-submenu-show', ''));
+            break;
+        }
+    }
+}
+
+function removeShowSubmenu(path) {
+    if (!path)
+        return;
+    
+    for (const attr of path.get('openingElement.attributes')) {
+        const {name, value} = attr.node;
+        
+        if (name.name !== 'className')
+            continue;
+        
+        const currentValue = value.value;
+        
+        if (currentValue.includes('menu-submenu-show')) {
+            setLiteralValue(value, currentValue.replace(' menu-submenu-show', ''));
+            break;
+        }
+    }
+}

package/menu/rules/submenu/fixture/last-selected-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'>
+        <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'>
+        <label data-menu-path="New.Directory">Directory</label>
+    </li>
+    </ul>
+</li>
+</ul>;

package/menu/rules/submenu/fixture/last-selected.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 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 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/fixture/no-submenu-selected.js

@@ -0,0 +1,17 @@
+// 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>;

package/menu/rules/submenu/index.js

@@ -1,9 +1,10 @@
 import {operator, types} from 'putout';
+import {checkDataName} from '../check-data-name.js';
 
 const {isJSXElement} = types;
 const {setLiteralValue} = operator;
 
-export const report = () => `Select right`;
+export const report = ({insideSubmenu}) => `${insideSubmenu ? 'Show' : 'Hide'} submenu`;
 
 export const fix = ({path, prev, next, insideSubmenu}) => {
     const {value} = path.node;
@@ -17,8 +18,10 @@ export const fix = ({path, prev, next, insideSubmenu}) => {
         return;
     }
     
-    const newValue = `${value.value} menu-item-selected`;
-    setLiteralValue(value, newValue);
+    if (!value.value.includes('menu-item-selected')) {
+        const newValue = `${value.value} menu-item-selected`;
+        setLiteralValue(value, newValue);
+    }
 };
 
 export const traverse = ({options, push}) => ({
@@ -38,7 +41,9 @@ export const traverse = ({options, push}) => ({
         if (!isJSXElement(path.parentPath.parentPath))
             return;
         
-        if (!checkDataName(path.parentPath.parentPath))
+        const openingElementPath = path.parentPath.parentPath.get('openingElement');
+        
+        if (!checkDataName(openingElementPath))
             return;
         
         const children = path.parentPath
@@ -53,44 +58,17 @@ export const traverse = ({options, push}) => ({
         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,
-                });
-        }
+        const [currentClassPath] = getClassPath(current);
+        
+        push({
+            path: currentClassPath,
+            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');
     
@@ -118,3 +96,20 @@ function unselect(path) {
             setLiteralValue(value, value.value.replace(' menu-item-selected', ''));
     }
 }
+
+function getClassPath(path) {
+    if (!path)
+        return [null, ''];
+    
+    for (const attr of path.get('openingElement.attributes')) {
+        const {name, value} = attr.node;
+        
+        if (name.name !== 'className')
+            continue;
+        
+        return [
+            attr,
+            value.value,
+        ];
+    }
+}

package/menu/state.js

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

package/package.json

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