@neovici/cosmoz-bottom-bar 9.1.1 → 9.2.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 +13 -7
- package/package.json +2 -2
|
@@ -84,7 +84,13 @@ const style = css `
|
|
|
84
84
|
line-height: 40px;
|
|
85
85
|
overflow: hidden;
|
|
86
86
|
flex: 0 0 auto;
|
|
87
|
+
}
|
|
88
|
+
#bottomBarToolbar::slotted(
|
|
89
|
+
:not(slot):not([unstyled])[data-visibility='hidden']
|
|
90
|
+
) {
|
|
87
91
|
visibility: hidden;
|
|
92
|
+
width: 100%;
|
|
93
|
+
order: 9999;
|
|
88
94
|
}
|
|
89
95
|
|
|
90
96
|
#bottomBarToolbar::slotted(:not(slot)[disabled]) {
|
|
@@ -140,7 +146,7 @@ const useMenuButtons = (host) => {
|
|
|
140
146
|
useEffect(() => {
|
|
141
147
|
processedButtons.forEach(({ element, priority }, i) => {
|
|
142
148
|
const isVisible = i < toolbarLimit;
|
|
143
|
-
element.
|
|
149
|
+
element.dataset.visibility = isVisible ? 'visible' : 'hidden';
|
|
144
150
|
element.style.order = String(-priority);
|
|
145
151
|
});
|
|
146
152
|
}, [processedButtons, toolbarLimit]);
|
|
@@ -166,13 +172,13 @@ const CosmozBottomBar = (host) => {
|
|
|
166
172
|
useLayoutEffect(() => {
|
|
167
173
|
toggle(host, active);
|
|
168
174
|
}, [active]);
|
|
169
|
-
return html
|
|
175
|
+
return html ` <div id="bar" part="bar">
|
|
170
176
|
<div id="info" part="info"><slot name="info"></slot></div>
|
|
171
|
-
<div id="buttonContainer">
|
|
177
|
+
<div id="buttonContainer" part="buttons">
|
|
172
178
|
<slot id="bottomBarToolbar" ${overflow(setButtonStates)}></slot>
|
|
173
179
|
</div>
|
|
174
180
|
|
|
175
|
-
<cosmoz-dropdown-menu id="dropdown">
|
|
181
|
+
<cosmoz-dropdown-menu id="dropdown" part="dropdown">
|
|
176
182
|
<svg
|
|
177
183
|
slot="button"
|
|
178
184
|
width="4"
|
|
@@ -185,19 +191,19 @@ const CosmozBottomBar = (host) => {
|
|
|
185
191
|
fill-rule="evenodd"
|
|
186
192
|
clip-rule="evenodd"
|
|
187
193
|
d="M1.50996e-07 2C1.02714e-07 3.10457 0.89543 4 2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 -3.91405e-08 2 -8.74228e-08C0.895431 -1.35705e-07 1.99278e-07 0.89543 1.50996e-07 2Z"
|
|
188
|
-
fill="
|
|
194
|
+
fill="currentColor"
|
|
189
195
|
/>
|
|
190
196
|
<path
|
|
191
197
|
fill-rule="evenodd"
|
|
192
198
|
clip-rule="evenodd"
|
|
193
199
|
d="M1.50996e-07 8C1.02714e-07 9.10457 0.89543 10 2 10C3.10457 10 4 9.10457 4 8C4 6.89543 3.10457 6 2 6C0.895431 6 1.99278e-07 6.89543 1.50996e-07 8Z"
|
|
194
|
-
fill="
|
|
200
|
+
fill="currentColor"
|
|
195
201
|
/>
|
|
196
202
|
<path
|
|
197
203
|
fill-rule="evenodd"
|
|
198
204
|
clip-rule="evenodd"
|
|
199
205
|
d="M1.50996e-07 14C1.02714e-07 15.1046 0.89543 16 2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 1.99278e-07 12.8954 1.50996e-07 14Z"
|
|
200
|
-
fill="
|
|
206
|
+
fill="currentColor"
|
|
201
207
|
/>
|
|
202
208
|
</svg>
|
|
203
209
|
${map(menuButtons, (menuButton) => html `
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-bottom-bar",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.2.0",
|
|
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",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@neovici/cosmoz-collapse": "^1.5.0",
|
|
55
|
-
"@neovici/cosmoz-dropdown": "^
|
|
55
|
+
"@neovici/cosmoz-dropdown": "^6.0.0",
|
|
56
56
|
"@neovici/cosmoz-utils": "^6.13.1",
|
|
57
57
|
"@pionjs/pion": "^2.5.2",
|
|
58
58
|
"@polymer/polymer": "^3.3.0",
|