@neovici/cosmoz-bottom-bar 8.0.1 → 8.1.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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-bottom-bar",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.1.1",
|
|
4
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
5
|
"keywords": [
|
|
6
6
|
"polymer",
|
|
@@ -53,11 +53,6 @@
|
|
|
53
53
|
"publishConfig": {
|
|
54
54
|
"access": "public"
|
|
55
55
|
},
|
|
56
|
-
"commitlint": {
|
|
57
|
-
"extends": [
|
|
58
|
-
"@commitlint/config-conventional"
|
|
59
|
-
]
|
|
60
|
-
},
|
|
61
56
|
"dependencies": {
|
|
62
57
|
"@neovici/cosmoz-collapse": "^1.5.0",
|
|
63
58
|
"@neovici/cosmoz-dropdown": "^4.0.0 || ^5.0.0",
|
|
@@ -86,7 +81,7 @@
|
|
|
86
81
|
"@web/storybook-builder": "^0.1.9",
|
|
87
82
|
"@web/storybook-framework-web-components": "^0.1.1",
|
|
88
83
|
"@webcomponents/webcomponentsjs": "^2.5.0",
|
|
89
|
-
"esbuild": "^0.
|
|
84
|
+
"esbuild": "^0.25.0",
|
|
90
85
|
"eslint": "^8.57.1",
|
|
91
86
|
"http-server": "^14.1.1",
|
|
92
87
|
"husky": "^9.1.1",
|
|
@@ -5,7 +5,7 @@ import { component, useLayoutEffect } from '@pionjs/pion';
|
|
|
5
5
|
import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
|
|
6
6
|
import { style } from './cosmoz-bottom-bar-next.style.js';
|
|
7
7
|
import { toggleSize } from '@neovici/cosmoz-collapse/toggle';
|
|
8
|
-
import {
|
|
8
|
+
import { useActivity } from '@neovici/cosmoz-utils/keybindings/use-activity';
|
|
9
9
|
import '@neovici/cosmoz-dropdown';
|
|
10
10
|
|
|
11
11
|
const BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar';
|
|
@@ -120,6 +120,20 @@ const _layoutActions = (host, maxToolbarItems) => {
|
|
|
120
120
|
host.toggleAttribute('has-menu-items', menuElements.length > 0);
|
|
121
121
|
};
|
|
122
122
|
|
|
123
|
+
export const openMenu = Symbol('openMenu');
|
|
124
|
+
|
|
125
|
+
const openActionsMenu = (host) => {
|
|
126
|
+
const dropdown = host.shadowRoot.querySelector('#dropdown');
|
|
127
|
+
|
|
128
|
+
if (dropdown.hasAttribute('hidden')) return;
|
|
129
|
+
|
|
130
|
+
//TODO: Clean up when open function is implemented for cosmoz-dropdown-menu
|
|
131
|
+
dropdown.shadowRoot
|
|
132
|
+
.querySelector('cosmoz-dropdown')
|
|
133
|
+
.shadowRoot.getElementById('dropdownButton')
|
|
134
|
+
.click();
|
|
135
|
+
};
|
|
136
|
+
|
|
123
137
|
/**
|
|
124
138
|
* `<cosmoz-bottom-bar>` is a horizontal responsive bottom toolbar containing items that
|
|
125
139
|
* can be used for actions.
|
|
@@ -143,6 +157,16 @@ const _layoutActions = (host, maxToolbarItems) => {
|
|
|
143
157
|
const CosmozBottomBar = ({ active = false, maxToolbarItems = 1 }) => {
|
|
144
158
|
const host = useHost();
|
|
145
159
|
|
|
160
|
+
useActivity(
|
|
161
|
+
{
|
|
162
|
+
activity: openMenu,
|
|
163
|
+
callback: () => openActionsMenu(host),
|
|
164
|
+
check: () => host.active && !host.hasAttribute('hide-actions'),
|
|
165
|
+
element: () => host.shadowRoot.querySelector('#dropdown'),
|
|
166
|
+
},
|
|
167
|
+
[host.active],
|
|
168
|
+
);
|
|
169
|
+
|
|
146
170
|
const toggle = toggleSize('height');
|
|
147
171
|
|
|
148
172
|
useLayoutEffect(() => {
|
|
@@ -154,7 +178,7 @@ const CosmozBottomBar = ({ active = false, maxToolbarItems = 1 }) => {
|
|
|
154
178
|
};
|
|
155
179
|
|
|
156
180
|
return html`<div id="bar" part="bar">
|
|
157
|
-
<div id="info"><slot name="info"></slot></div>
|
|
181
|
+
<div id="info" part="info"><slot name="info"></slot></div>
|
|
158
182
|
<slot
|
|
159
183
|
id="bottomBarToolbar"
|
|
160
184
|
name="bottom-bar-toolbar"
|
|
@@ -203,6 +227,6 @@ customElements.define(
|
|
|
203
227
|
'cosmoz-bottom-bar-next',
|
|
204
228
|
component(CosmozBottomBar, {
|
|
205
229
|
observedAttributes: ['active'],
|
|
206
|
-
styleSheets: [
|
|
230
|
+
styleSheets: [style],
|
|
207
231
|
}),
|
|
208
232
|
);
|
|
@@ -17,6 +17,7 @@ export const style = css`
|
|
|
17
17
|
rgba(230, 230, 230, 0.8)
|
|
18
18
|
);
|
|
19
19
|
box-shadow: var(--cosmoz-bottom-bar-shadow, none);
|
|
20
|
+
z-index: 1;
|
|
20
21
|
|
|
21
22
|
--cosmoz-dropdown-anchor-spacing: 12px 6px;
|
|
22
23
|
--paper-button: {
|
|
@@ -50,7 +51,7 @@ export const style = css`
|
|
|
50
51
|
margin-right: auto;
|
|
51
52
|
white-space: nowrap;
|
|
52
53
|
}
|
|
53
|
-
#bottomBarToolbar::slotted(:not(slot)) {
|
|
54
|
+
#bottomBarToolbar::slotted(:not(slot):not([unstyled])) {
|
|
54
55
|
margin: 0 0.29em;
|
|
55
56
|
min-width: 40px;
|
|
56
57
|
min-height: 40px;
|