aleman 1.5.0 β 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ChangeLog +10 -0
- package/README.md +10 -20
- package/menu/README.md +1 -0
- package/menu/addons/index.js +4 -0
- package/menu/addons/shift-g.js +36 -0
- package/menu/addons/up.js +0 -1
- package/menu/addons/vim.js +37 -0
- package/menu/rules/build-menu/fixture/build-menu-fix.js +1 -1
- package/menu/rules/build-menu/fixture/icon-fix.js +1 -1
- package/menu/rules/build-menu/fixture/nested-fix.js +1 -1
- package/menu/rules/build-menu/index.js +8 -2
- package/menu/rules/hide-submenu/index.js +0 -1
- package/menu/rules/index.js +2 -0
- package/menu/rules/menu/fixture/hide-menu-fix.js +2 -2
- package/menu/rules/menu/fixture/hide-menu.js +2 -2
- package/menu/rules/menu/index.js +0 -1
- package/menu/rules/select/fixture/select-fix.js +6 -6
- package/menu/rules/select/fixture/select.js +2 -2
- package/menu/rules/select/fixture/submenu-fix.js +6 -6
- package/menu/rules/select/fixture/submenu.js +2 -2
- package/menu/rules/select/index.js +1 -1
- package/menu/rules/set-position/index.js +0 -1
- package/menu/rules/submenu/index.js +0 -1
- package/menu/rules/unselect-all/index.js +2 -5
- package/menu/rules/unselect-wrongly-selected/fixture/unselect-wrongly-selected-fix.js +17 -0
- package/menu/rules/unselect-wrongly-selected/fixture/unselect-wrongly-selected.js +17 -0
- package/menu/rules/unselect-wrongly-selected/index.js +36 -0
- package/package.json +1 -1
package/ChangeLog
CHANGED
package/README.md
CHANGED
|
@@ -12,6 +12,8 @@
|
|
|
12
12
|
>
|
|
13
13
|
> Yamamoto Tsunetomo, Hagakure
|
|
14
14
|
|
|
15
|
+
πPutout-based framework for web.
|
|
16
|
+
|
|
15
17
|
## Install
|
|
16
18
|
|
|
17
19
|
```
|
|
@@ -23,26 +25,14 @@ bun i aleman
|
|
|
23
25
|
Addon:
|
|
24
26
|
|
|
25
27
|
```js
|
|
26
|
-
export const events = ['
|
|
27
|
-
|
|
28
|
-
export const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
return command !== 'hide';
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export const listener = ({state, render, element}) => {
|
|
40
|
-
const index = element.index || 0;
|
|
41
|
-
|
|
42
|
-
render('select-next', {
|
|
43
|
-
index: index + 1,
|
|
44
|
-
});
|
|
45
|
-
};
|
|
28
|
+
export const events = ['click'];
|
|
29
|
+
export const filter = ({state}) => state.command === 'show';
|
|
30
|
+
export const listener = () => ({
|
|
31
|
+
command: 'hide',
|
|
32
|
+
index: -1,
|
|
33
|
+
showSubmenu: false,
|
|
34
|
+
insideSubmenu: false,
|
|
35
|
+
});
|
|
46
36
|
```
|
|
47
37
|
|
|
48
38
|
## Licence
|
package/menu/README.md
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
- β
[`show-menu`](https://putout.cloudcmd.io/#/gist/884fd40c07b94951de1a9ce99afab015/21d4881b44955b1426f80e87c76b7ad86eeea464);
|
|
6
6
|
- β
[`select`](https://putout.cloudcmd.io/#/gist/10891aa58ff2ecfa1728ed19aeb2e3f2/ce536fb0b414faefbae5d0c8a094517beb1c606e);
|
|
7
7
|
- β
[`unselect-all`](https://putout.cloudcmd.io/#/gist/ca24f199f508cccb34b11baf726eba83/96f08fa91331ac6265d9f5ff48692c9d4ad1b98b);
|
|
8
|
+
- β
[`unselect-wrongly-selected`](https://putout.cloudcmd.io/#/gist/bea80410db3824764800d912b2c574df/090445e44dcf211795e408a57a4991c9d4b12693);
|
|
8
9
|
- β
[`build-menu`](https://putout.cloudcmd.io/#/gist/329dccd5fdc7f8b220be79af405dc9bb/b56df53f52bbe2a300ede38a96d1d2242e60679f);
|
|
9
10
|
- β
[`set-position`](https://putout.cloudcmd.io/#/gist/215bb4654a27f15235f3e380a3035138/7f4af88aaa4863be4f1b8a90b9f0f4b1cf4744a0);
|
|
10
11
|
- β
[`submenu`](https://putout.cloudcmd.io/#/gist/b0a3b64d14f3497869a345e7e438d66e/feb671c4a59a555ff408af92fab602bae3a94e2f);
|
package/menu/addons/index.js
CHANGED
|
@@ -5,6 +5,8 @@ import * as up from './up.js';
|
|
|
5
5
|
import * as enter from './enter.js';
|
|
6
6
|
import * as left from './left.js';
|
|
7
7
|
import * as right from './right.js';
|
|
8
|
+
import * as shiftG from './shift-g.js';
|
|
9
|
+
import {createVim} from './vim.js';
|
|
8
10
|
|
|
9
11
|
export const addons = [
|
|
10
12
|
click,
|
|
@@ -14,4 +16,6 @@ export const addons = [
|
|
|
14
16
|
enter,
|
|
15
17
|
left,
|
|
16
18
|
right,
|
|
19
|
+
shiftG,
|
|
20
|
+
createVim(),
|
|
17
21
|
];
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import {getSubmenu} from './submenu/index.js';
|
|
2
|
+
|
|
3
|
+
export const keys = ['G'];
|
|
4
|
+
|
|
5
|
+
export const preventDefault = true;
|
|
6
|
+
|
|
7
|
+
export const listener = ({state, options}) => {
|
|
8
|
+
const {menu} = options;
|
|
9
|
+
let {
|
|
10
|
+
index,
|
|
11
|
+
insideSubmenu,
|
|
12
|
+
submenuIndex,
|
|
13
|
+
} = state;
|
|
14
|
+
|
|
15
|
+
const menuValues = Object.values(menu);
|
|
16
|
+
|
|
17
|
+
if (insideSubmenu && submenuIndex > 0)
|
|
18
|
+
submenuIndex = 0;
|
|
19
|
+
|
|
20
|
+
if (!insideSubmenu)
|
|
21
|
+
index = menuValues.length - 1;
|
|
22
|
+
|
|
23
|
+
const submenu = getSubmenu({
|
|
24
|
+
index,
|
|
25
|
+
options,
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
const submenuCount = Object.keys(submenu).length;
|
|
29
|
+
const showSubmenu = submenuCount > 0;
|
|
30
|
+
|
|
31
|
+
return {
|
|
32
|
+
index,
|
|
33
|
+
submenuIndex,
|
|
34
|
+
showSubmenu,
|
|
35
|
+
};
|
|
36
|
+
};
|
package/menu/addons/up.js
CHANGED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as up from './up.js';
|
|
2
|
+
|
|
3
|
+
export const createVim = () => {
|
|
4
|
+
const buffer = [];
|
|
5
|
+
|
|
6
|
+
return {
|
|
7
|
+
events,
|
|
8
|
+
filter,
|
|
9
|
+
listener: createListener(buffer),
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const events = ['keydown'];
|
|
14
|
+
|
|
15
|
+
const filter = ({state}) => state.command === 'show';
|
|
16
|
+
|
|
17
|
+
const createListener = (buffer) => ({event, state, options}) => {
|
|
18
|
+
const {key} = event;
|
|
19
|
+
|
|
20
|
+
if (!buffer.length && key === 'g') {
|
|
21
|
+
buffer.push('g');
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
if (buffer[0] === 'g' && key === 'g') {
|
|
26
|
+
buffer = [];
|
|
27
|
+
return up.listener({
|
|
28
|
+
state: {
|
|
29
|
+
...state,
|
|
30
|
+
index: 1,
|
|
31
|
+
},
|
|
32
|
+
options,
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
buffer = [];
|
|
37
|
+
};
|
|
@@ -1 +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>;
|
|
1
|
+
<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>;
|
|
@@ -1 +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>;
|
|
1
|
+
<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>;
|
|
@@ -1 +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>;
|
|
1
|
+
<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>;
|
|
@@ -5,6 +5,7 @@ const {
|
|
|
5
5
|
hasDataName,
|
|
6
6
|
addClassName,
|
|
7
7
|
} = operator;
|
|
8
|
+
|
|
8
9
|
const {entries} = Object;
|
|
9
10
|
|
|
10
11
|
const noop = () => {};
|
|
@@ -13,7 +14,7 @@ const isObject = (a) => a && typeof a === 'object';
|
|
|
13
14
|
export const report = () => `Build menu`;
|
|
14
15
|
|
|
15
16
|
const createMenuItem = template(`
|
|
16
|
-
<li data-name="menu-item" className="menu-item" data-menu-path=""><label data-menu-path="">NAME</label></li>
|
|
17
|
+
<li data-name="menu-item" data-menu-index="" className="menu-item" data-menu-path=""><label data-menu-path="">NAME</label></li>
|
|
17
18
|
`);
|
|
18
19
|
|
|
19
20
|
const createMenu = template(`
|
|
@@ -27,6 +28,7 @@ const DefaultMenu = {
|
|
|
27
28
|
|
|
28
29
|
export const fix = ({path, menu, icon, name = ''}) => {
|
|
29
30
|
const {children} = path.node;
|
|
31
|
+
let i = 0;
|
|
30
32
|
|
|
31
33
|
for (const [key, value] of entries(menu)) {
|
|
32
34
|
const menuItem = createMenuItem();
|
|
@@ -36,6 +38,7 @@ export const fix = ({path, menu, icon, name = ''}) => {
|
|
|
36
38
|
if (icon)
|
|
37
39
|
setIcon(key, menuItem);
|
|
38
40
|
|
|
41
|
+
setDataMenuIndex(i++, menuItem);
|
|
39
42
|
setDataMenuPath(key, name, menuItem);
|
|
40
43
|
setDataMenuPath(key, name, menuItem.children[0]);
|
|
41
44
|
|
|
@@ -89,6 +92,10 @@ function setDataMenuPath(key, name, menuItem) {
|
|
|
89
92
|
setAttributeValue(menuItem, 'data-menu-path', dataMenuPath);
|
|
90
93
|
}
|
|
91
94
|
|
|
95
|
+
function setDataMenuIndex(index, menuItem) {
|
|
96
|
+
setAttributeValue(menuItem, 'data-menu-index', index);
|
|
97
|
+
}
|
|
98
|
+
|
|
92
99
|
function setIcon(name, menuItem) {
|
|
93
100
|
addClassName(menuItem, `icon ${getIconName(name)}`);
|
|
94
101
|
}
|
|
@@ -99,4 +106,3 @@ function getIconName(name) {
|
|
|
99
106
|
.replace(/\s/g, '-')
|
|
100
107
|
.toLowerCase();
|
|
101
108
|
}
|
|
102
|
-
|
package/menu/rules/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as unselectWronglySelected from './unselect-wrongly-selected/index.js';
|
|
1
2
|
import * as hideSubmenu from './hide-submenu/index.js';
|
|
2
3
|
import * as submenu from './submenu/index.js';
|
|
3
4
|
import * as setPosition from './set-position/index.js';
|
|
@@ -14,4 +15,5 @@ export const rules = {
|
|
|
14
15
|
'unselect-all': unselectAll,
|
|
15
16
|
'submenu': submenu,
|
|
16
17
|
'hide-submenu': hideSubmenu,
|
|
18
|
+
'unselect-wrongly-selected': unselectWronglySelected,
|
|
17
19
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<
|
|
1
|
+
<section data-name="aleman-hydrate-hello">
|
|
2
2
|
<ul data-name="menu" className="menu menu-hidden"><li></li><li></li></ul>;
|
|
3
|
-
</
|
|
3
|
+
</section>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<
|
|
1
|
+
<section data-name="aleman-hydrate-hello">
|
|
2
2
|
<ul data-name="menu" className="menu"><li></li><li></li></ul>;
|
|
3
|
-
</
|
|
3
|
+
</section>;
|
package/menu/rules/menu/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<ul data-name="menu" class="menu menu-hidden">
|
|
2
|
-
<li data-name="menu-item" className="menu-item icon icon-view">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<li data-name="menu-item" className="menu-item icon icon-edit menu-item-selected">
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
<li data-name="menu-item" data-menu-index="0" className="menu-item icon icon-view">
|
|
3
|
+
<label data-menu-path="View">View</label>
|
|
4
|
+
</li>
|
|
5
|
+
<li data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit menu-item-selected">
|
|
6
|
+
<label data-menu-path="Edit">Edit</label>
|
|
7
|
+
</li>
|
|
8
8
|
</ul>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<ul data-name="menu" class="menu menu-hidden">
|
|
2
|
-
<li data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
|
|
2
|
+
<li data-name="menu-item" data-menu-index="0" className="menu-item icon icon-view menu-item-selected">
|
|
3
3
|
<label data-menu-path="View">View</label>
|
|
4
4
|
</li>
|
|
5
|
-
<li data-name="menu-item" className="menu-item icon icon-edit">
|
|
5
|
+
<li data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit">
|
|
6
6
|
<label data-menu-path="Edit">Edit</label>
|
|
7
7
|
</li>
|
|
8
8
|
</ul>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<ul data-name="menu" class="menu menu-hidden">
|
|
2
|
-
<li data-name="menu-item" className="menu-item icon icon-view">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<li data-name="menu-item" className="menu-item icon icon-edit menu-item-selected menu-submenu-show">
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
<li data-name="menu-item" data-menu-index="0" className="menu-item icon icon-view">
|
|
3
|
+
<label data-menu-path="View">View</label>
|
|
4
|
+
</li>
|
|
5
|
+
<li data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit menu-item-selected menu-submenu-show">
|
|
6
|
+
<label data-menu-path="Edit">Edit</label>
|
|
7
|
+
</li>
|
|
8
8
|
</ul>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<ul data-name="menu" class="menu menu-hidden">
|
|
2
|
-
<li data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
|
|
2
|
+
<li data-name="menu-item" data-menu-index="0" className="menu-item icon icon-view menu-item-selected">
|
|
3
3
|
<label data-menu-path="View">View</label>
|
|
4
4
|
</li>
|
|
5
|
-
<li data-name="menu-item" className="menu-item icon icon-edit">
|
|
5
|
+
<li data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit">
|
|
6
6
|
<label data-menu-path="Edit">Edit</label>
|
|
7
7
|
</li>
|
|
8
8
|
</ul>;
|
|
@@ -20,6 +20,7 @@ export const fix = ({path, prev, next, showSubmenu}) => {
|
|
|
20
20
|
});
|
|
21
21
|
unselect(prev);
|
|
22
22
|
unselect(next);
|
|
23
|
+
|
|
23
24
|
removeShowSubmenu(next);
|
|
24
25
|
removeShowSubmenu(prev);
|
|
25
26
|
};
|
|
@@ -73,4 +74,3 @@ function addShowSubmenu(path, {showSubmenu}) {
|
|
|
73
74
|
function removeShowSubmenu(path) {
|
|
74
75
|
removeClassName(path, SHOW);
|
|
75
76
|
}
|
|
76
|
-
|
|
@@ -12,7 +12,7 @@ const SELECTED = 'menu-item-selected';
|
|
|
12
12
|
|
|
13
13
|
export const report = () => `Unselect all`;
|
|
14
14
|
|
|
15
|
-
export const fix = (
|
|
15
|
+
export const fix = (path) => {
|
|
16
16
|
removeClassName(path, SELECTED);
|
|
17
17
|
};
|
|
18
18
|
|
|
@@ -38,10 +38,7 @@ export const traverse = ({push, options}) => ({
|
|
|
38
38
|
|
|
39
39
|
for (const child of children) {
|
|
40
40
|
if (containsClassName(child, SELECTED))
|
|
41
|
-
push(
|
|
42
|
-
path: child,
|
|
43
|
-
});
|
|
41
|
+
push(child);
|
|
44
42
|
}
|
|
45
43
|
},
|
|
46
44
|
});
|
|
47
|
-
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// second selected
|
|
2
|
+
<ul data-name="menu" class="menu menu-hidden">
|
|
3
|
+
<li data-menu-path="Upload" data-name="menu-item" data-menu-index="0" className="menu-item icon icon-view">
|
|
4
|
+
<label data-menu-path="Upload">Upload</label>
|
|
5
|
+
</li>
|
|
6
|
+
<li data-menu-path="New" data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit menu-item-selected">
|
|
7
|
+
<label data-menu-path="New">New</label>
|
|
8
|
+
<ul data-name="menu" class="menu menu-hidden">
|
|
9
|
+
<li data-menu-path="New.File" data-name="menu-item" data-menu-index="0" className="menu-item icon icon-view menu-item-selected">
|
|
10
|
+
<label data-menu-path="Upload">Upload</label>
|
|
11
|
+
</li>
|
|
12
|
+
<li data-menu-path="Directory" data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit">
|
|
13
|
+
<label data-menu-path="New.Directory">New</label>
|
|
14
|
+
</li>
|
|
15
|
+
</ul>
|
|
16
|
+
</li>
|
|
17
|
+
</ul>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// second selected
|
|
2
|
+
<ul data-name="menu" class="menu menu-hidden">
|
|
3
|
+
<li data-menu-path="Upload" data-name="menu-item" data-menu-index="0" className="menu-item icon icon-view menu-item-selected">
|
|
4
|
+
<label data-menu-path="Upload">Upload</label>
|
|
5
|
+
</li>
|
|
6
|
+
<li data-menu-path="New" data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit menu-item-selected">
|
|
7
|
+
<label data-menu-path="New">New</label>
|
|
8
|
+
<ul data-name="menu" class="menu menu-hidden">
|
|
9
|
+
<li data-menu-path="New.File" data-name="menu-item" data-menu-index="0" className="menu-item icon icon-view menu-item-selected">
|
|
10
|
+
<label data-menu-path="Upload">Upload</label>
|
|
11
|
+
</li>
|
|
12
|
+
<li data-menu-path="Directory" data-name="menu-item" data-menu-index="1" className="menu-item icon icon-edit">
|
|
13
|
+
<label data-menu-path="New.Directory">New</label>
|
|
14
|
+
</li>
|
|
15
|
+
</ul>
|
|
16
|
+
</li>
|
|
17
|
+
</ul>;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import {operator} from 'putout';
|
|
2
|
+
|
|
3
|
+
const {
|
|
4
|
+
getAttributeValue,
|
|
5
|
+
hasTagName,
|
|
6
|
+
removeClassName,
|
|
7
|
+
containsClassName,
|
|
8
|
+
} = operator;
|
|
9
|
+
|
|
10
|
+
export const report = () => `Unselect wrongly selected`;
|
|
11
|
+
|
|
12
|
+
export const fix = (path) => {
|
|
13
|
+
removeClassName(path, 'menu-item-selected');
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export const traverse = ({push, options}) => ({
|
|
17
|
+
JSXElement(path) {
|
|
18
|
+
const {index = 1} = options;
|
|
19
|
+
|
|
20
|
+
if (!hasTagName(path, 'li'))
|
|
21
|
+
return;
|
|
22
|
+
|
|
23
|
+
if (hasTagName(path.parentPath.parentPath, 'li'))
|
|
24
|
+
return;
|
|
25
|
+
|
|
26
|
+
if (!containsClassName(path, 'menu-item-selected'))
|
|
27
|
+
return;
|
|
28
|
+
|
|
29
|
+
const dataMenuIndex = Number(getAttributeValue(path, 'data-menu-index'));
|
|
30
|
+
|
|
31
|
+
if (index === dataMenuIndex)
|
|
32
|
+
return;
|
|
33
|
+
|
|
34
|
+
push(path);
|
|
35
|
+
},
|
|
36
|
+
});
|