aleman 1.12.3 → 1.13.0

package/ChangeLog

@@ -1,3 +1,13 @@
+2025.09.17, v1.13.0
+
+fix:
+- 6c5e67c aleman: menu: select
+
+2025.09.16, v1.12.4
+
+fix:
+- 870da2e aleman: menu: addons: set-position: clientX / 2
+
 2025.09.15, v1.12.3
 
 fix:

package/aleman/add-listeners.js

@@ -1,4 +1,9 @@
 import {createVimParser} from './vim.js';
+import {
+    emitBefore,
+    emitIf,
+    emitRun,
+} from './emit.js';
 
 const queryElement = ({name}) => {
     return document.querySelector(`[data-name="${name}"]`);
@@ -65,34 +70,30 @@ export const addGlobalListeners = ({globalAddons, options, readState, writeState
 
 const createListener = ({options, addon, readState, writeState, parseVim = createVimParser()}) => (event) => {
     const {
-        keys,
-        listener,
         preventDefault,
         stopPropagation,
-        filter,
         after,
         afterIf,
-        commands,
     } = addon;
     
-    if (keys && !keys.includes(event.key))
-        return;
-    
-    const [command, count] = parseVim(event);
+    const [isEmitBefore, count] = emitBefore(addon, {
+        event,
+        parseVim,
+    });
     
-    if (commands && !commands.includes(command))
-        return;
+    if (!isEmitBefore)
+        return false;
     
     const state = readState();
     
-    const is = filter?.({
+    const is = emitIf(addon, {
         event,
         state,
         options,
     });
     
-    if (filter && !is)
-        return false;
+    if (!is)
+        return;
     
     if (preventDefault)
         event.preventDefault();
@@ -100,12 +101,11 @@ const createListener = ({options, addon, readState, writeState, parseVim = creat
     if (stopPropagation)
         event.stopPropagation();
     
-    const newState = listener({
+    const newState = emitRun(addon, {
         count,
         event,
         state,
         options,
-        writeState,
     });
     
     writeState(newState);

package/aleman/emit.js

@@ -0,0 +1,52 @@
+export const emit = (addon, {state, options, event, parseVim}) => {
+    const [isEmitBefore, count] = emitBefore(addon, {
+        event,
+        parseVim,
+    });
+    
+    if (!isEmitBefore)
+        return false;
+    
+    if (!emitIf(addon, {state, event}))
+        return state;
+    
+    return emitRun(addon, {
+        event,
+        state,
+        options,
+        count,
+    });
+};
+export const emitIf = (addon, {state, event, options}) => {
+    if (!addon.filter)
+        return true;
+    
+    return addon.filter({
+        state,
+        event,
+        options,
+    });
+};
+
+export const emitRun = (addon, {count, state, event, options}) => {
+    return addon.listener({
+        count,
+        event,
+        state,
+        options,
+    });
+};
+
+export const emitBefore = (addon, {event, parseVim}) => {
+    const {keys, commands} = addon;
+    
+    if (keys && !keys.includes(event.key))
+        return [false];
+    
+    const [command, count] = parseVim(event);
+    
+    if (commands && !commands.includes(command))
+        return [false];
+    
+    return [true, count];
+};

package/aleman/render.js

@@ -33,7 +33,7 @@ export const createRender = (html, {options, rules}) => {
         });
         
         if (!places.length)
-            return [SKIP];
+            return [SKIP, '', places];
         
         transform(ast, '', {
             rules: currentRules,
@@ -53,6 +53,10 @@ export const createRender = (html, {options, rules}) => {
         const suffix = '<\\template>\n';
         const result = merge('', [code]).slice(prefix.length, -suffix.length);
         
-        return [TRANSFORM, result];
+        return [
+            TRANSFORM,
+            result,
+            places,
+        ];
     };
 };

package/menu/addons/context-menu.js

@@ -1,4 +1,4 @@
-import {setPosition} from './set-position.js';
+import {setPosition} from './set-position/set-position.js';
 
 export const createContextMenu = (name) => ({
     name,

package/menu/addons/index.js

@@ -8,7 +8,7 @@ import * as right from './right.js';
 import * as shiftG from './shift-g.js';
 import * as gg from './gg.js';
 import * as j from './j.js';
-import * as k from './k.js';
+import * as k from './k/k.js';
 
 export const addons = [
     click,

package/menu/addons/k/fixture/k-fix.html

@@ -0,0 +1 @@
+    <ul data-name="menu" class="menu menu-hidden" style="left: 0px; top: 20px;">    <li data-name="menu-item" data-menu-index="0" class="menu-item icon icon-view menu-item-selected">    <label data-menu-path="View">View</label></li>    <li data-name="menu-item" data-menu-index="1" class="menu-item icon icon-edit">    <label data-menu-path="Edit">Edit</label></li></ul>;

package/menu/addons/k/fixture/k.html

@@ -0,0 +1,8 @@
+<ul data-name="menu" className="menu menu-hidden" style="left: 0px; top: 20px;">
+    <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/addons/k/fixture/m.js

@@ -0,0 +1,8 @@
+<ul data-name="menu" class="menu menu-hidden" style="left: 0px; top: 20px;">
+    <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/addons/{k.js → k/k.js}

@@ -1,6 +1,6 @@
-import * as down from './down.js';
+import * as up from '../up.js';
 
-export const {filter} = down;
+export const {filter} = up;
 export const commands = ['k'];
 
 export function listener({count, state, options}) {
@@ -10,8 +10,8 @@ export function listener({count, state, options}) {
         submenuIndex,
     } = state;
     
-    let newIndex = insideSubmenu ? index : index - count - 1;
-    let newSubmenuIndex = insideSubmenu ? submenuIndex - count - 1 : submenuIndex;
+    let newIndex = insideSubmenu ? index : index - count + 1;
+    let newSubmenuIndex = insideSubmenu ? submenuIndex - count + 1 : submenuIndex;
     
     if (newIndex < -1)
         newIndex = -1;
@@ -25,7 +25,7 @@ export function listener({count, state, options}) {
         submenuIndex: newSubmenuIndex,
     };
     
-    return down.listener({
+    return up.listener({
         state: newState,
         options,
     });

package/menu/addons/set-position/calculate.js

@@ -0,0 +1,28 @@
+export function calculate(event, sizes) {
+    let {clientX, clientY} = event;
+    const {
+        heightMenu,
+        widthMenu,
+        innerHeight,
+        innerWidth,
+    } = sizes;
+    
+    if (innerWidth < widthMenu + clientX + clientX / 2) {
+        clientX -= widthMenu;
+        
+        if (clientX < 0)
+            clientX = 0;
+    }
+    
+    if (innerHeight < heightMenu + clientY) {
+        clientY -= heightMenu;
+        
+        if (clientY < 0)
+            clientY = 0;
+    }
+    
+    return {
+        x: clientX,
+        y: clientY - 14,
+    };
+}

package/menu/addons/{set-position.js → set-position/set-position.js}

@@ -1,6 +1,17 @@
+import {calculate} from './calculate.js';
+
 export const setPosition = (name, event) => {
     const element = document.querySelector(`[data-name="${name}"]`);
-    const {x, y} = calculate(element, event);
+    const heightMenu = getMenuHeight(element);
+    const widthMenu = getMenuWidth(element);
+    const {innerHeight, innerWidth} = window;
+    
+    const {x, y} = calculate(event, {
+        heightMenu,
+        widthMenu,
+        innerWidth,
+        innerHeight,
+    });
     
     element.style.left = `${x}px`;
     element.style.top = `${y}px`;
@@ -13,32 +24,6 @@ export const setPosition = (name, event) => {
     };
 };
 
-function calculate(element, {clientX, clientY}) {
-    const heightMenu = getMenuHeight(element);
-    const widthMenu = getMenuWidth(element);
-    const heightInner = window.innerHeight;
-    const widthInner = window.innerWidth;
-    
-    if (widthInner < widthMenu + clientX) {
-        clientX -= widthMenu;
-        
-        if (clientX < 0)
-            clientX = 0;
-    }
-    
-    if (heightInner < heightMenu + clientY) {
-        clientY -= heightMenu;
-        
-        if (clientY < 0)
-            clientY = 0;
-    }
-    
-    return {
-        x: clientX,
-        y: clientY - 14,
-    };
-}
-
 function getMenuHeight(element) {
     const {height} = getComputedStyle(element);
     return parseInt(height, 10);

package/menu/addons/up.js

@@ -3,6 +3,9 @@ import {getSubmenu} from './submenu/index.js';
 export const keys = ['ArrowUp'];
 
 export const preventDefault = true;
+export const filter = ({state, options}) => {
+    return state.command === 'show';
+};
 
 export const listener = ({state, options}) => {
     const {menu} = options;

package/menu/hydrate-menu.js

@@ -6,7 +6,7 @@ import {createMouseEnter} from './addons/mouse-enter.js';
 import {createItemClick} from './addons/item-click.js';
 import * as click from './addons/click.js';
 import {createContextMenu} from './addons/context-menu.js';
-import {setPosition} from './addons/set-position.js';
+import {setPosition} from './addons/set-position/set-position.js';
 
 const {assign} = Object;
 

package/menu/importmap.js

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

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

@@ -8,7 +8,6 @@ const {
 
 const {entries} = Object;
 
-const noop = () => {};
 const isObject = (a) => a && typeof a === 'object';
 
 export const report = () => `Build menu`;
@@ -22,8 +21,8 @@ const createMenu = template(`
 `);
 
 const DefaultMenu = {
-    hello: noop,
-    world: noop,
+    hello: null,
+    world: null,
 };
 
 export const fix = ({path, menu, icon, name = ''}) => {

package/menu/rules/select/index.js

@@ -6,6 +6,8 @@ const {
     addClassName,
     hasDataName,
     removeClassName,
+    hasAttributeValue,
+    containsClassName,
 } = operator;
 
 const SELECTED = 'menu-item-selected';
@@ -31,6 +33,7 @@ export const traverse = ({options, push}) => ({
             name = 'menu',
             index = 1,
             showSubmenu,
+            insideSubmenu,
         } = options;
         
         if (!hasTagName(path, 'li'))
@@ -44,15 +47,18 @@ export const traverse = ({options, push}) => ({
         if (!hasDataName(parentPath, name))
             return;
         
+        if (!insideSubmenu && !hasAttributeValue(path, 'data-menu-index', `${index}`))
+            return;
+        
+        if (!insideSubmenu && containsClassName(path, 'menu-item-selected'))
+            return;
+        
         const children = parentPath.get('children').filter(isJSXElement);
         
         const prev = children[index - 1];
         const current = children[index];
         const next = children[index + 1];
         
-        if (!current)
-            return;
-        
         push({
             path: current,
             prev,
@@ -74,3 +80,4 @@ function addShowSubmenu(path, {showSubmenu}) {
 function removeShowSubmenu(path) {
     removeClassName(path, SHOW);
 }
+

package/menu/state.js

@@ -1,19 +1,12 @@
-const {keys} = Object;
-
-export const initState = ({menu, name = 'menu'}) => {
-    const count = keys(menu).length;
-    
-    return {
-        name,
-        command: 'hide',
-        insideSubmenu: false,
-        submenuIndex: 0,
-        showSubmenu: false,
-        index: -1,
-        count,
-        position: {
-            x: 0,
-            y: 20,
-        },
-    };
-};
+export const initState = ({name = 'menu'}) => ({
+    name,
+    command: 'hide',
+    insideSubmenu: false,
+    submenuIndex: 0,
+    showSubmenu: false,
+    index: -1,
+    position: {
+        x: 0,
+        y: 20,
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aleman",
-  "version": "1.12.3",
+  "version": "1.13.0",
   "type": "module",
   "author": "coderaiser <mnemonic.enemy@gmail.com> (https://github.com/coderaiser)",
   "description": "🐊Putout-based framework for web",
@@ -23,6 +23,9 @@
     "coverage": "madrun coverage",
     "report": "madrun report"
   },
+  "imports": {
+    "#test": "./test/create-test.js"
+  },
   "dependencies": {
     "@putout/processor-html": "^14.0.2",
     "fullstore": "^3.0.0",