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
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", "name": "@tp/tp-dropdown",
"version": "1.4.0", "version": "1.5.0",
"description": "", "description": "",
"main": "tp-dropdown.js", "main": "tp-dropdown.js",
"scripts": { "scripts": {

18
tp-dropdown.js
View File

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