aleman 1.4.11 → 1.6.0

package/ChangeLog

@@ -1,3 +1,13 @@
+2025.09.12, v1.6.0
+
+feature:
+- 5cd7d44 aleman: menu: shift+g, gg: add
+
+2025.09.10, v1.5.0
+
+feature:
+- dd17f0a aleman: menu: get rid of jsx-operator
+
 2025.09.10, v1.4.11
 
 feature:

package/README.md

@@ -12,6 +12,8 @@
 >
 > Yamamoto Tsunetomo, Hagakure
 
+🐊Putout-based framework for web.
+
 ## Install
 
 ```
@@ -23,26 +25,14 @@ bun i aleman
 Addon:
 
 ```js
-export const events = ['keydown'];
-
-export const filter = ({event, state}) => {
-    if (event.key !== 'ArrowDown')
-        return false;
-    
-    const {command} = state['menu-toggler'] || {
-        command: 'show',
-    };
-    
-    return command !== 'hide';
-};
-
-export const listener = ({state, render, element}) => {
-    const index = element.index || 0;
-    
-    render('select-next', {
-        index: index + 1,
-    });
-};
+export const events = ['click'];
+export const filter = ({state}) => state.command === 'show';
+export const listener = () => ({
+    command: 'hide',
+    index: -1,
+    showSubmenu: false,
+    insideSubmenu: false,
+});
 ```
 
 ## Licence

package/menu/README.md

@@ -5,6 +5,7 @@
 - ✅[`show-menu`](https://putout.cloudcmd.io/#/gist/884fd40c07b94951de1a9ce99afab015/21d4881b44955b1426f80e87c76b7ad86eeea464);
 - ✅[`select`](https://putout.cloudcmd.io/#/gist/10891aa58ff2ecfa1728ed19aeb2e3f2/ce536fb0b414faefbae5d0c8a094517beb1c606e);
 - ✅[`unselect-all`](https://putout.cloudcmd.io/#/gist/ca24f199f508cccb34b11baf726eba83/96f08fa91331ac6265d9f5ff48692c9d4ad1b98b);
+- ✅[`unselect-wrongly-selected`](https://putout.cloudcmd.io/#/gist/bea80410db3824764800d912b2c574df/090445e44dcf211795e408a57a4991c9d4b12693);
 - ✅[`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);

package/menu/addons/index.js

@@ -5,6 +5,8 @@ import * as up from './up.js';
 import * as enter from './enter.js';
 import * as left from './left.js';
 import * as right from './right.js';
+import * as shiftG from './shift-g.js';
+import {createVim} from './vim.js';
 
 export const addons = [
     click,
@@ -14,4 +16,6 @@ export const addons = [
     enter,
     left,
     right,
+    shiftG,
+    createVim(),
 ];

package/menu/addons/shift-g.js

@@ -0,0 +1,37 @@
+import {getSubmenu} from './submenu/index.js';
+
+export const keys = ['G'];
+
+export const preventDefault = true;
+
+export const listener = ({state, options}) => {
+    const {menu} = options;
+    let {
+        index,
+        insideSubmenu,
+        submenuIndex,
+    } = state;
+    
+    const menuValues = Object.values(menu);
+    
+    if (insideSubmenu && submenuIndex > 0)
+        submenuIndex = 0;
+    
+    if (!insideSubmenu)
+        index = menuValues.length - 1;
+    
+    const submenu = getSubmenu({
+        index,
+        options,
+    });
+    
+    const submenuCount = Object.keys(submenu).length;
+    const showSubmenu = submenuCount > 0;
+    
+    return {
+        index,
+        submenuIndex,
+        showSubmenu,
+    };
+};
+

package/menu/addons/up.js

@@ -32,7 +32,6 @@ export const listener = ({state, options}) => {
     });
     
     const submenuCount = Object.keys(submenu).length;
-    
     const showSubmenu = submenuCount > 0;
     
     return {

package/menu/addons/vim.js

@@ -0,0 +1,35 @@
+import * as up from './up.js';
+
+export const createVim = () => {
+    const buffer = [];
+    
+    return {
+        events,
+        filter,
+        listener: createListener(buffer),
+    };
+};
+
+const events = ['keydown'];
+
+const filter = ({state}) => state.command === 'show';
+
+const createListener = (buffer) => ({event, state, options}) => {
+    const {key} = event;
+    
+    if (!buffer.length && key === 'g') {
+        buffer.push('g');
+        return;
+    }
+    
+    if (buffer[0] === 'g' && key === 'g') {
+        buffer = [];
+        return up.listener({
+            state: {
+                ...state,
+                index: 1,
+            },
+            options,
+        });
+    }
+};

package/menu/importmap.js

@@ -1,6 +1,6 @@
 export const importmap = {
     imports: {
-        'putout': 'https://esm.sh/@putout/bundle@4.6.9',
+        'putout': 'https://esm.sh/@putout/bundle@4.6.10',
         '@putout/processor-html': 'https://esm.sh/@putout/processor-html',
         'fullstore': 'https://esm.sh/fullstore',
         'jessy': 'https://esm.sh/jessy',

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" 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>;
+<ul data-name="menu" class="menu menu-hidden"><li data-name="menu-item" data-menu-index="0" className="menu-item" data-menu-path="hello"><label data-menu-path="hello">hello</label></li><li data-name="menu-item" data-menu-index="1" 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" 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>;
+<ul data-name="menu" class="menu menu-hidden"><li data-name="menu-item" data-menu-index="0" className="menu-item icon icon-hello" data-menu-path="hello"><label data-menu-path="hello">hello</label></li><li data-name="menu-item" data-menu-index="1" 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" 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>;
+<ul data-name="menu" class="menu menu-hidden"><li data-name="menu-item" data-menu-index="0" 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" data-menu-index="0" 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

@@ -1,7 +1,11 @@
 import {template, operator} from 'putout';
-import {addClassName, hasDataName} from '../jsx-operator.js';
 
-const {setAttributeValue} = operator;
+const {
+    setAttributeValue,
+    hasDataName,
+    addClassName,
+} = operator;
+
 const {entries} = Object;
 
 const noop = () => {};
@@ -10,7 +14,7 @@ const isObject = (a) => a && typeof a === 'object';
 export const report = () => `Build menu`;
 
 const createMenuItem = template(`
-    <li data-name="menu-item" className="menu-item" data-menu-path=""><label data-menu-path="">NAME</label></li>
+    <li data-name="menu-item" data-menu-index="" className="menu-item" data-menu-path=""><label data-menu-path="">NAME</label></li>
 `);
 
 const createMenu = template(`
@@ -24,6 +28,7 @@ const DefaultMenu = {
 
 export const fix = ({path, menu, icon, name = ''}) => {
     const {children} = path.node;
+    let i = 0;
     
     for (const [key, value] of entries(menu)) {
         const menuItem = createMenuItem();
@@ -33,6 +38,7 @@ export const fix = ({path, menu, icon, name = ''}) => {
         if (icon)
             setIcon(key, menuItem);
         
+        setDataMenuIndex(i++, menuItem);
         setDataMenuPath(key, name, menuItem);
         setDataMenuPath(key, name, menuItem.children[0]);
         
@@ -86,6 +92,10 @@ function setDataMenuPath(key, name, menuItem) {
     setAttributeValue(menuItem, 'data-menu-path', dataMenuPath);
 }
 
+function setDataMenuIndex(index, menuItem) {
+    setAttributeValue(menuItem, 'data-menu-index', index);
+}
+
 function setIcon(name, menuItem) {
     addClassName(menuItem, `icon ${getIconName(name)}`);
 }
@@ -96,4 +106,3 @@ function getIconName(name) {
         .replace(/\s/g, '-')
         .toLowerCase();
 }
-

package/menu/rules/hide-submenu/index.js

@@ -1,11 +1,12 @@
 import {operator} from 'putout';
-import {
-    containsClassName,
+
+const {
+    hasTagName,
     removeClassName,
     hasDataName,
-} from '../jsx-operator.js';
+    containsClassName,
+} = operator;
 
-const {hasTagName} = operator;
 const CLASS = 'menu-submenu-show';
 
 export const report = () => `Hide submenu`;

package/menu/rules/index.js

@@ -1,3 +1,4 @@
+import * as unselectWronglySelected from './unselect-wrongly-selected/index.js';
 import * as hideSubmenu from './hide-submenu/index.js';
 import * as submenu from './submenu/index.js';
 import * as setPosition from './set-position/index.js';
@@ -14,4 +15,5 @@ export const rules = {
     'unselect-all': unselectAll,
     'submenu': submenu,
     'hide-submenu': hideSubmenu,
+    'unselect-wrongly-selected': unselectWronglySelected,
 };

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

@@ -1,3 +1,3 @@
-<sction data-name="aleman-hydrate-hello">
+<section data-name="aleman-hydrate-hello">
     <ul data-name="menu" className="menu menu-hidden"><li></li><li></li></ul>;
-</sction>;
+</section>;

package/menu/rules/menu/fixture/hide-menu.js

@@ -1,3 +1,3 @@
-<sction data-name="aleman-hydrate-hello">
+<section data-name="aleman-hydrate-hello">
     <ul data-name="menu" className="menu"><li></li><li></li></ul>;
-</sction>;
+</section>;

package/menu/rules/menu/index.js

@@ -1,9 +1,11 @@
-import {
-    addClassName,
+import {operator} from 'putout';
+
+const {
     containsClassName,
     hasDataName,
+    addClassName,
     removeClassName,
-} from '../jsx-operator.js';
+} = operator;
 
 export const report = ({command}) => {
     const [first, ...rest] = command;

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

@@ -1,8 +1,8 @@
 <ul data-name="menu" class="menu menu-hidden">
-    <li data-name="menu-item" className="menu-item icon icon-view">
-        <label data-menu-path="View">View</label>
-    </li>
-    <li data-name="menu-item" className="menu-item icon icon-edit menu-item-selected">
-        <label data-menu-path="Edit">Edit</label>
-    </li>
+    <li data-name="menu-item" data-menu-index="0" className="menu-item icon icon-view">
+    <label data-menu-path="View">View</label>
+</li>
+    <li data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit menu-item-selected">
+    <label data-menu-path="Edit">Edit</label>
+</li>
 </ul>;

package/menu/rules/select/fixture/select.js

@@ -1,8 +1,8 @@
 <ul data-name="menu" class="menu menu-hidden">
-    <li data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+    <li data-name="menu-item" data-menu-index="0" className="menu-item icon icon-view menu-item-selected">
         <label data-menu-path="View">View</label>
     </li>
-    <li data-name="menu-item" className="menu-item icon icon-edit">
+    <li data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit">
         <label data-menu-path="Edit">Edit</label>
     </li>
 </ul>;

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

@@ -1,8 +1,8 @@
 <ul data-name="menu" class="menu menu-hidden">
-    <li data-name="menu-item" className="menu-item icon icon-view">
-        <label data-menu-path="View">View</label>
-    </li>
-    <li data-name="menu-item" className="menu-item icon icon-edit menu-item-selected menu-submenu-show">
-        <label data-menu-path="Edit">Edit</label>
-    </li>
+    <li data-name="menu-item" data-menu-index="0" className="menu-item icon icon-view">
+    <label data-menu-path="View">View</label>
+</li>
+    <li data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit menu-item-selected menu-submenu-show">
+    <label data-menu-path="Edit">Edit</label>
+</li>
 </ul>;

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

@@ -1,8 +1,8 @@
 <ul data-name="menu" class="menu menu-hidden">
-    <li data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+    <li data-name="menu-item" data-menu-index="0" className="menu-item icon icon-view menu-item-selected">
         <label data-menu-path="View">View</label>
     </li>
-    <li data-name="menu-item" className="menu-item icon icon-edit">
+    <li data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit">
         <label data-menu-path="Edit">Edit</label>
     </li>
 </ul>;

package/menu/rules/select/index.js

@@ -1,12 +1,14 @@
 import {operator, types} from 'putout';
-import {
+
+const {isJSXElement} = types;
+const {
+    hasTagName,
     addClassName,
     hasDataName,
     removeClassName,
-} from '../jsx-operator.js';
+    getAttributeValue,
+} = operator;
 
-const {hasTagName} = operator;
-const {isJSXElement} = types;
 const SELECTED = 'menu-item-selected';
 const SHOW = 'menu-submenu-show';
 
@@ -19,6 +21,7 @@ export const fix = ({path, prev, next, showSubmenu}) => {
     });
     unselect(prev);
     unselect(next);
+    
     removeShowSubmenu(next);
     removeShowSubmenu(prev);
 };
@@ -51,6 +54,11 @@ export const traverse = ({options, push}) => ({
         if (!current)
             return;
         
+        const dataMenuIndex = getAttributeValue(current, 'data-menu-index');
+        
+        if (index !== Number(dataMenuIndex))
+            return;
+        
         push({
             path: current,
             prev,

package/menu/rules/set-position/index.js

@@ -1,10 +1,10 @@
 import {types, operator} from 'putout';
-import {hasDataName} from '../jsx-operator.js';
 
 const {
     setAttributeValue,
     getAttributeValue,
     getAttributePath,
+    hasDataName,
 } = operator;
 
 const {
@@ -74,4 +74,3 @@ function parsePosition(str) {
         Number(y),
     ];
 }
-

package/menu/rules/submenu/index.js

@@ -1,12 +1,12 @@
 import {operator, types} from 'putout';
-import {
+
+const {
+    hasTagName,
+    removeClassName,
     addClassName,
-    containsClassName,
     hasDataName,
-    removeClassName,
-} from '../jsx-operator.js';
-
-const {hasTagName} = operator;
+    containsClassName,
+} = operator;
 
 const {isJSXElement} = types;
 

package/menu/rules/unselect-all/index.js

@@ -1,17 +1,18 @@
 import {operator, types} from 'putout';
-import {
-    containsClassName,
-    hasDataName,
+
+const {
+    hasTagName,
     removeClassName,
-} from '../jsx-operator.js';
+    hasDataName,
+    containsClassName,
+} = operator;
 
-const {hasTagName} = operator;
 const {isJSXElement} = types;
 const SELECTED = 'menu-item-selected';
 
 export const report = () => `Unselect all`;
 
-export const fix = ({path}) => {
+export const fix = (path) => {
     removeClassName(path, SELECTED);
 };
 
@@ -37,9 +38,7 @@ export const traverse = ({push, options}) => ({
         
         for (const child of children) {
             if (containsClassName(child, SELECTED))
-                push({
-                    path: child,
-                });
+                push(child);
         }
     },
 });

package/menu/rules/unselect-wrongly-selected/fixture/unselect-wrongly-selected-fix.js

@@ -0,0 +1,17 @@
+// second selected
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-menu-path="Upload" data-name="menu-item" data-menu-index="0" 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" data-menu-index="1" 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" data-menu-index="0" className="menu-item icon icon-view menu-item-selected">
+                <label data-menu-path="Upload">Upload</label>
+            </li>
+            <li data-menu-path="Directory" data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit">
+                <label data-menu-path="New.Directory">New</label>
+            </li>
+        </ul>
+    </li>
+</ul>;

package/menu/rules/unselect-wrongly-selected/fixture/unselect-wrongly-selected.js

@@ -0,0 +1,17 @@
+// second selected
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-menu-path="Upload" data-name="menu-item" data-menu-index="0" 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" data-menu-index="1" 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" data-menu-index="0" className="menu-item icon icon-view menu-item-selected">
+                <label data-menu-path="Upload">Upload</label>
+            </li>
+            <li data-menu-path="Directory" data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit">
+                <label data-menu-path="New.Directory">New</label>
+            </li>
+        </ul>
+    </li>
+</ul>;

package/menu/rules/unselect-wrongly-selected/index.js

@@ -0,0 +1,36 @@
+import {operator} from 'putout';
+
+const {
+    getAttributeValue,
+    hasTagName,
+    removeClassName,
+    containsClassName,
+} = operator;
+
+export const report = () => `Unselect wrongly selected`;
+
+export const fix = (path) => {
+    removeClassName(path, 'menu-item-selected');
+};
+
+export const traverse = ({push, options}) => ({
+    JSXElement(path) {
+        const {index = 1} = options;
+        
+        if (!hasTagName(path, 'li'))
+            return;
+        
+        if (hasTagName(path.parentPath.parentPath, 'li'))
+            return;
+        
+        if (!containsClassName(path, 'menu-item-selected'))
+            return;
+        
+        const dataMenuIndex = Number(getAttributeValue(path, 'data-menu-index'));
+        
+        if (index === dataMenuIndex)
+            return;
+        
+        push(path);
+    },
+});

package/package.json

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

package/menu/rules/jsx-operator.js

@@ -1,29 +0,0 @@
-import {operator} from 'putout';
-
-const {
-    addAttributeValue,
-    getAttributeValue,
-    removeAttributeValue,
-} = operator;
-
-export function addClassName(path, name) {
-    addAttributeValue(path, 'className', name);
-}
-
-export function getClassName(path) {
-    return getAttributeValue(path, 'className');
-}
-
-export function removeClassName(path, name) {
-    removeAttributeValue(path, 'className', name);
-}
-
-export function containsClassName(path, className) {
-    const classNameValue = getClassName(path);
-    return classNameValue.includes(className);
-}
-
-export function hasDataName(path, value = '') {
-    const attribute = getAttributeValue(path, 'data-name');
-    return attribute === value;
-}