tp-elements/tp-dropdown
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add popup part. Rename #list to #popup.

Browse Source 
Add css var for styling popup background.
This commit is contained in:
trading_peter 2025-01-05 23:38:18 +01:00
parent 4d7e5e6364
commit 693314fc1e
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@tp/tp-dropdown",
"version": "1.4.0",
"version": "1.5.0",
"description": "",
"main": "tp-dropdown.js",
"scripts": {

18
tp-dropdown.js
View File

@ -117,7 +117,7 @@ class TpDropdown extends BaseElement {
opacity: 1;
}
#list {
#popup {
pointer-events: none;
transition: opacity 0ms;
opacity: 0;
@ -126,12 +126,12 @@ class TpDropdown extends BaseElement {
height: auto;
}
#list[open] {
#popup[open] {
pointer-events: all;
transition: opacity 180ms;
opacity: 1;
border-radius: 2px;
background: #FAFAFA;
background: var(--tp-dropdown-popup-bg, #FAFAFA);
height: auto;
box-shadow: var(--shadow-2dp);
}
@ -202,7 +202,7 @@ class TpDropdown extends BaseElement {
@media all and (min-width: 0) and (max-width: 480px) {
:host(:not([not-responsive])) #list {
:host(:not([not-responsive])) #popup {
top: 40px !important;
bottom: 40px !important;
left: 40px !important;
@ -249,7 +249,7 @@ class TpDropdown extends BaseElement {
<tp-icon id="toggleIcon" ?open="${isOpen}" .icon=${TpDropdown.selectorIcon}></tp-icon>
</div>
</div>
<div id="list" ?open="${isOpen}">
<div id="popup" ?open="${isOpen}" part="popup">
${filterable ? html`
<tp-input part="filter" exportparts="wrap:filterWrap" id="filter" .value=${this._filterTerm || ''} @input=${e => this._filterTerm = e.target.value} .inert=${!isOpen} ?hidden=${!(filterable || extensible)}>
<input type="text" placeholder=${filterPlaceholder}>
@ -561,8 +561,8 @@ class TpDropdown extends BaseElement {
var spaceBottom = winHeight - rect.top - rect.height - filterHeight;
this.$.itemList.style.maxHeight = (spaceBottom - 20) + 'px';
this.$.list.style.maxWidth = rect.width + 'px';
this.$.list.style.minWidth = rect.width + 'px';
this.$.popup.style.maxWidth = rect.width + 'px';
this.$.popup.style.minWidth = rect.width + 'px';
var useTopLayout = spaceBottom < 150;
@ -570,7 +570,7 @@ class TpDropdown extends BaseElement {
this.$.itemList.style.maxHeight = (rect.top - 20) + 'px';
}
this._posFixed(this, this.$.list, {
this._posFixed(this, this.$.popup, {
spacing: 0,
valign: useTopLayout ? 'top' : 'bottom',
halign: 'left'
@ -580,7 +580,7 @@ class TpDropdown extends BaseElement {
setTimeout(() => {
var lastItem = this.$.itemList.querySelector('div[role="option"]:last-of-type');
if (lastItem) {
this.$.list.style.maxHeight = lastItem.getBoundingClientRect().top + 'px';
this.$.popup.style.maxHeight = lastItem.getBoundingClientRect().top + 'px';
}
});
}