@neovici/cosmoz-bottom-bar 9.2.0 → 9.4.0
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/dist/cosmoz-bottom-bar.js +18 -8
- package/dist/overflow.d.ts +1 -0
- package/dist/overflow.js +27 -2
- package/package.json +83 -89
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/* eslint-disable max-len */
|
|
2
|
-
import { html } from 'lit-html';
|
|
3
|
-
import { map } from 'lit-html/directives/map.js';
|
|
4
|
-
import { html as polymerHtml } from '@polymer/polymer/polymer-element.js';
|
|
5
|
-
import { component, css, useEffect, useLayoutEffect, useMemo, useState, } from '@pionjs/pion';
|
|
6
2
|
import { toggleSize } from '@neovici/cosmoz-collapse/toggle';
|
|
7
|
-
import { useActivity } from '@neovici/cosmoz-utils/keybindings/use-activity';
|
|
8
3
|
import '@neovici/cosmoz-dropdown';
|
|
4
|
+
import { useActivity } from '@neovici/cosmoz-utils/keybindings/use-activity';
|
|
5
|
+
import { component, css, useEffect, useLayoutEffect, useMemo, useRef, useState, } from '@pionjs/pion';
|
|
6
|
+
import { html as polymerHtml } from '@polymer/polymer/polymer-element.js';
|
|
7
|
+
import { html } from 'lit-html';
|
|
8
|
+
import { map } from 'lit-html/directives/map.js';
|
|
9
9
|
import overflow from './overflow';
|
|
10
10
|
const style = css `
|
|
11
11
|
:host {
|
|
@@ -86,8 +86,8 @@ const style = css `
|
|
|
86
86
|
flex: 0 0 auto;
|
|
87
87
|
}
|
|
88
88
|
#bottomBarToolbar::slotted(
|
|
89
|
-
|
|
90
|
-
|
|
89
|
+
:not(slot):not([unstyled])[data-visibility='hidden']
|
|
90
|
+
) {
|
|
91
91
|
visibility: hidden;
|
|
92
92
|
width: 100%;
|
|
93
93
|
order: 9999;
|
|
@@ -133,6 +133,9 @@ const useMenuButtons = (host) => {
|
|
|
133
133
|
visible: new Set(),
|
|
134
134
|
overflowing: new Set(),
|
|
135
135
|
});
|
|
136
|
+
useEffect(() => {
|
|
137
|
+
host.dispatchEvent(new CustomEvent('reflow', { detail: buttonStates }));
|
|
138
|
+
}, [buttonStates]);
|
|
136
139
|
const allButtons = useMemo(() => [...buttonStates.visible, ...buttonStates.overflowing], [buttonStates]);
|
|
137
140
|
const processedButtons = useMemo(() => allButtons
|
|
138
141
|
.map((btn) => ({
|
|
@@ -161,6 +164,7 @@ const useMenuButtons = (host) => {
|
|
|
161
164
|
};
|
|
162
165
|
const CosmozBottomBar = (host) => {
|
|
163
166
|
const { active = false } = host;
|
|
167
|
+
const mounted = useRef(false);
|
|
164
168
|
useActivity({
|
|
165
169
|
activity: openMenu,
|
|
166
170
|
callback: () => openActionsMenu(host),
|
|
@@ -170,7 +174,13 @@ const CosmozBottomBar = (host) => {
|
|
|
170
174
|
const { setButtonStates, menuButtons } = useMenuButtons(host);
|
|
171
175
|
const toggle = useMemo(() => toggleSize('height'), []);
|
|
172
176
|
useLayoutEffect(() => {
|
|
173
|
-
|
|
177
|
+
if (!mounted.current) {
|
|
178
|
+
toggle(host, active, { duration: 0 });
|
|
179
|
+
}
|
|
180
|
+
else {
|
|
181
|
+
toggle(host, active);
|
|
182
|
+
}
|
|
183
|
+
mounted.current = true;
|
|
174
184
|
}, [active]);
|
|
175
185
|
return html ` <div id="bar" part="bar">
|
|
176
186
|
<div id="info" part="info"><slot name="info"></slot></div>
|
package/dist/overflow.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import { DirectiveResult } from 'lit-html/directive.js';
|
|
|
4
4
|
type OnOverflow = (opts: {
|
|
5
5
|
visible: Set<HTMLElement>;
|
|
6
6
|
overflowing: Set<HTMLElement>;
|
|
7
|
+
hidden: Set<HTMLElement>;
|
|
7
8
|
}) => void;
|
|
8
9
|
declare class OverflowDirective extends AsyncDirective {
|
|
9
10
|
observer?: IntersectionObserver;
|
package/dist/overflow.js
CHANGED
|
@@ -4,14 +4,30 @@ import { directive } from 'lit-html/directive.js';
|
|
|
4
4
|
function isEntryHidden(el) {
|
|
5
5
|
return el.boundingClientRect.height === 0;
|
|
6
6
|
}
|
|
7
|
+
function isElementHidden(el) {
|
|
8
|
+
return el.getBoundingClientRect().height === 0;
|
|
9
|
+
}
|
|
7
10
|
const check = (part) => {
|
|
8
11
|
if (part.element.tagName !== 'SLOT') {
|
|
9
12
|
throw new Error('Overflow directive must be used on a slot element');
|
|
10
13
|
}
|
|
11
14
|
};
|
|
15
|
+
function reconcileHiddenElements(hidden, overflowing) {
|
|
16
|
+
// If a parent element was hidden, all its children were marked as hidden.
|
|
17
|
+
// When the parent becomes visible, the observer only reports entries for
|
|
18
|
+
// children that intersect the parent’s content box. Others remain stuck in
|
|
19
|
+
// `hidden` even if they should be `overflowing`. This pass corrects that.
|
|
20
|
+
hidden.forEach((el) => {
|
|
21
|
+
if (isElementHidden(el))
|
|
22
|
+
return;
|
|
23
|
+
overflowing.add(el);
|
|
24
|
+
hidden.delete(el);
|
|
25
|
+
});
|
|
26
|
+
}
|
|
12
27
|
const setupObserver = (slot, onOverflow) => {
|
|
13
28
|
let visible = new Set();
|
|
14
29
|
let overflowing = new Set();
|
|
30
|
+
let hidden = new Set();
|
|
15
31
|
const observer = new IntersectionObserver((entries) => {
|
|
16
32
|
entries.forEach((entry) => {
|
|
17
33
|
const el = entry.target;
|
|
@@ -19,22 +35,27 @@ const setupObserver = (slot, onOverflow) => {
|
|
|
19
35
|
entry.intersectionRect.height !== 0) {
|
|
20
36
|
visible.add(el);
|
|
21
37
|
overflowing.delete(el);
|
|
38
|
+
hidden.delete(el);
|
|
22
39
|
}
|
|
23
40
|
else if (isEntryHidden(entry)) {
|
|
24
41
|
visible.delete(el);
|
|
25
42
|
overflowing.delete(el);
|
|
43
|
+
hidden.add(el);
|
|
26
44
|
}
|
|
27
45
|
else {
|
|
28
46
|
visible.delete(el);
|
|
29
47
|
overflowing.add(el);
|
|
48
|
+
hidden.delete(el);
|
|
30
49
|
}
|
|
31
50
|
});
|
|
32
|
-
|
|
51
|
+
reconcileHiddenElements(hidden, overflowing);
|
|
52
|
+
onOverflow({ visible, overflowing, hidden });
|
|
33
53
|
}, { root: slot.parentElement, threshold: [0, 0.5, 1] });
|
|
34
54
|
const observe = () => {
|
|
35
55
|
const elements = Array.from(slot.assignedElements({ flatten: true }));
|
|
36
56
|
const newVisible = new Set();
|
|
37
57
|
const newOverflowing = new Set();
|
|
58
|
+
const newHidden = new Set();
|
|
38
59
|
for (const c of elements) {
|
|
39
60
|
if (visible.has(c)) {
|
|
40
61
|
newVisible.add(c);
|
|
@@ -42,13 +63,17 @@ const setupObserver = (slot, onOverflow) => {
|
|
|
42
63
|
else if (overflowing.has(c)) {
|
|
43
64
|
newOverflowing.add(c);
|
|
44
65
|
}
|
|
66
|
+
else if (hidden.has(c)) {
|
|
67
|
+
newHidden.add(c);
|
|
68
|
+
}
|
|
45
69
|
else {
|
|
46
70
|
observer.observe(c);
|
|
47
71
|
}
|
|
48
72
|
}
|
|
49
73
|
visible = newVisible;
|
|
50
74
|
overflowing = newOverflowing;
|
|
51
|
-
|
|
75
|
+
hidden = newHidden;
|
|
76
|
+
onOverflow({ visible, overflowing, hidden });
|
|
52
77
|
};
|
|
53
78
|
observe();
|
|
54
79
|
slot.addEventListener('slotchange', observe);
|
package/package.json
CHANGED
|
@@ -1,91 +1,85 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
"rollup-plugin-esbuild": "^6.1.1",
|
|
86
|
-
"semantic-release": "^24.0.0",
|
|
87
|
-
"sinon": "^19.0.0",
|
|
88
|
-
"storybook": "^8.6.9",
|
|
89
|
-
"typescript": "^5.0.0"
|
|
90
|
-
}
|
|
2
|
+
"name": "@neovici/cosmoz-bottom-bar",
|
|
3
|
+
"version": "9.4.0",
|
|
4
|
+
"description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"polymer",
|
|
7
|
+
"web-components"
|
|
8
|
+
],
|
|
9
|
+
"homepage": "https://github.com/neovici/cosmoz-bottom-bar#readme",
|
|
10
|
+
"bugs": {
|
|
11
|
+
"url": "https://github.com/neovici/cosmoz-bottom-bar/issues"
|
|
12
|
+
},
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "git+https://github.com/neovici/cosmoz-bottom-bar.git"
|
|
16
|
+
},
|
|
17
|
+
"license": "Apache-2.0",
|
|
18
|
+
"author": "Neovici Development",
|
|
19
|
+
"main": "dist/index.js",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": "./dist/index.js"
|
|
22
|
+
},
|
|
23
|
+
"files": [
|
|
24
|
+
"dist/*",
|
|
25
|
+
"types"
|
|
26
|
+
],
|
|
27
|
+
"scripts": {
|
|
28
|
+
"lint": "tsc && eslint --cache .",
|
|
29
|
+
"build": "tsc -p tsconfig.build.json",
|
|
30
|
+
"start": "npm run storybook:start",
|
|
31
|
+
"test": "wtr --coverage",
|
|
32
|
+
"test:watch": "wtr --watch",
|
|
33
|
+
"prepare": "husky",
|
|
34
|
+
"storybook:start": "storybook dev -p 8000",
|
|
35
|
+
"storybook:build": "storybook build",
|
|
36
|
+
"storybook:deploy": "storybook-to-ghpages",
|
|
37
|
+
"storybook:preview": "npm run storybook:build && http-server -d ./storybook-static/"
|
|
38
|
+
},
|
|
39
|
+
"release": {
|
|
40
|
+
"plugins": [
|
|
41
|
+
"@semantic-release/commit-analyzer",
|
|
42
|
+
"@semantic-release/release-notes-generator",
|
|
43
|
+
"@semantic-release/changelog",
|
|
44
|
+
"@semantic-release/github",
|
|
45
|
+
"@semantic-release/npm",
|
|
46
|
+
"@semantic-release/git"
|
|
47
|
+
],
|
|
48
|
+
"branch": "master"
|
|
49
|
+
},
|
|
50
|
+
"publishConfig": {
|
|
51
|
+
"access": "public"
|
|
52
|
+
},
|
|
53
|
+
"dependencies": {
|
|
54
|
+
"@neovici/cosmoz-collapse": "^1.5.0",
|
|
55
|
+
"@neovici/cosmoz-dropdown": "^6.0.0",
|
|
56
|
+
"@neovici/cosmoz-utils": "^6.13.1",
|
|
57
|
+
"@pionjs/pion": "^2.5.2",
|
|
58
|
+
"@polymer/polymer": "^3.3.0",
|
|
59
|
+
"lit-html": "^2.0.0 || ^3.0.0"
|
|
60
|
+
},
|
|
61
|
+
"devDependencies": {
|
|
62
|
+
"@commitlint/cli": "^20.1.0",
|
|
63
|
+
"@commitlint/config-conventional": "^20.0.0",
|
|
64
|
+
"@neovici/cfg": "^2.0.0",
|
|
65
|
+
"@open-wc/testing": "^4.0.0",
|
|
66
|
+
"@polymer/iron-icon": "^3.0.1",
|
|
67
|
+
"@polymer/iron-icons": "^3.0.1",
|
|
68
|
+
"@polymer/paper-button": "^3.0.0",
|
|
69
|
+
"@polymer/paper-toggle-button": "^3.0.0",
|
|
70
|
+
"@semantic-release/changelog": "^6.0.0",
|
|
71
|
+
"@semantic-release/git": "^10.0.0",
|
|
72
|
+
"@storybook/web-components-vite": "^9.1.5",
|
|
73
|
+
"@types/mocha": "^10.0.6",
|
|
74
|
+
"@webcomponents/webcomponentsjs": "^2.5.0",
|
|
75
|
+
"esbuild": "^0.27.0",
|
|
76
|
+
"eslint": "^9.0.0",
|
|
77
|
+
"http-server": "^14.1.1",
|
|
78
|
+
"husky": "^9.1.1",
|
|
79
|
+
"rollup-plugin-esbuild": "^6.1.1",
|
|
80
|
+
"semantic-release": "^25.0.1",
|
|
81
|
+
"sinon": "^21.0.0",
|
|
82
|
+
"storybook": "^9.1.5",
|
|
83
|
+
"typescript": "^5.0.0"
|
|
84
|
+
}
|
|
91
85
|
}
|