fix(core): update
This commit is contained in:
parent
7708c89fe1
commit
4d5a490e80
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '1.0.232',
|
||||
version: '1.0.233',
|
||||
description: 'website for lossless.com'
|
||||
}
|
||||
|
||||
@ -20,9 +20,22 @@ export const demoFunc = () => html`
|
||||
form.setStatus('success', 'authenticated!');
|
||||
}}
|
||||
>
|
||||
<dees-input-dropdown
|
||||
.label=${'title'}
|
||||
.options=${[
|
||||
{ option: 'option 1', key: 'option1' },
|
||||
{ option: 'option 2', key: 'option2' },
|
||||
{ option: 'option 3', key: 'option3' },
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
<dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
|
||||
<dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
|
||||
<dees-input-text .required="${true}" key="hello3" label="a password" isPasswordBool></dees-input-text>
|
||||
<dees-input-text
|
||||
.required="${true}"
|
||||
key="hello3"
|
||||
label="a password"
|
||||
isPasswordBool
|
||||
></dees-input-text>
|
||||
<dees-input-checkbox
|
||||
.required="${true}"
|
||||
key="hello3"
|
||||
|
||||
@ -8,4 +8,20 @@ export const demoFunc = () => html`
|
||||
{option: 'option 3', key: 'option3'}
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
<dees-input-dropdown
|
||||
.enableSearch=${false}
|
||||
.options=${[
|
||||
{option: 'option 1', key: 'option1'},
|
||||
{option: 'option 2', key: 'option2'},
|
||||
{option: 'option 3', key: 'option3'}
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
<div style="height: 300px"></div>
|
||||
<dees-input-dropdown
|
||||
.options=${[
|
||||
{option: 'option 1', key: 'option1'},
|
||||
{option: 'option 2', key: 'option2'},
|
||||
{option: 'option 3', key: 'option3'}
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
`
|
||||
@ -1,6 +1,17 @@
|
||||
import { customElement, DeesElement, type TemplateResult, property, html, css, cssManager, type CSSResult, } from '@design.estate/dees-element';
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
state,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
type CSSResult,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { demoFunc } from './dees-input-dropdown.demo.js';
|
||||
import { DeesWindowLayer } from './dees-windowlayer.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -10,7 +21,7 @@ declare global {
|
||||
|
||||
@customElement('dees-input-dropdown')
|
||||
export class DeesInputDropdown extends DeesElement {
|
||||
public static demo = demoFunc
|
||||
public static demo = demoFunc;
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
|
||||
@ -25,144 +36,266 @@ export class DeesInputDropdown extends DeesElement {
|
||||
public key: string;
|
||||
|
||||
@property()
|
||||
public options: {option: string, key: string, payload?: any}[] = [];
|
||||
public options: { option: string; key: string; payload?: any }[] = [];
|
||||
|
||||
@property()
|
||||
public selectedOption: {option: string, key: string, payload?: any} = {
|
||||
key: null,
|
||||
option: null,
|
||||
payload: null
|
||||
};
|
||||
public selectedOption: { option: string; key: string; payload?: any } = null;
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
type: Boolean,
|
||||
})
|
||||
public required: boolean = false;
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
type: Boolean,
|
||||
})
|
||||
public enableSearch: boolean = true;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public disabled: boolean = false;
|
||||
|
||||
@state()
|
||||
public opensToTop: boolean = false;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 40px;
|
||||
color: ${cssManager.bdTheme('#222', '#fff')};
|
||||
}
|
||||
:host {
|
||||
font-family: Roboto;
|
||||
position: relative;
|
||||
display: block;
|
||||
color: ${cssManager.bdTheme('#222', '#fff')};
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
display: block;
|
||||
}
|
||||
.maincontainer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.selectedBox {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
max-width: 420px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0px 8px;
|
||||
z-index: 0px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#333333')};
|
||||
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
|
||||
border-radius: 3px;
|
||||
border-top: 1px solid #CCCCCC00;
|
||||
border-bottom: 1px solid #66666600;
|
||||
}
|
||||
.selectedBox {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
max-width: 420px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0px 8px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#222')};
|
||||
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
|
||||
border-radius: 3px;
|
||||
border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
|
||||
border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.selectedBox.show {
|
||||
border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#666666')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#fafafa', '#222222')};
|
||||
}
|
||||
.accentTop {
|
||||
border-top: 1px solid #e4002b;
|
||||
}
|
||||
|
||||
.selectionBox {
|
||||
will-change:transform;
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#222222')};
|
||||
max-width: 420px;
|
||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
|
||||
min-height: 40px;
|
||||
z-index: 100;
|
||||
border-radius: 3px;
|
||||
padding: 4px;
|
||||
transform: scale(0.99,0.99);
|
||||
}
|
||||
.accentBottom {
|
||||
border-bottom: 1px solid #e4002b;
|
||||
}
|
||||
|
||||
.selectionBox.show {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
transform: scale(1,1);
|
||||
}
|
||||
.selectionBox {
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
opacity: 0;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#222222')};
|
||||
max-width: 420px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
min-height: 40px;
|
||||
border-radius: 3px;
|
||||
padding: 4px;
|
||||
transform: scale(0.99, 0.99);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.option {
|
||||
transition: all 0.1s;
|
||||
line-height: 40px;
|
||||
padding: 0px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.selectionBox.show {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
color: #fff;
|
||||
padding-left: 8px;
|
||||
background: #0277bd;
|
||||
}
|
||||
`
|
||||
]
|
||||
.option {
|
||||
transition: all 0.1s;
|
||||
line-height: 40px;
|
||||
padding: 0px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
color: #fff;
|
||||
padding-left: 8px;
|
||||
background: #0277bd;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: 8px;
|
||||
}
|
||||
.search input {
|
||||
display: block;
|
||||
width: 80%;
|
||||
background: none;
|
||||
border: none;
|
||||
height: 24px;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: ${cssManager.bdTheme('#00000010', '#ffffff08')};
|
||||
border-radius: 16px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.search input:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="maincontainer">
|
||||
<div class="selectedBox show" @click="${event => {this.openSelectionBox();}}">
|
||||
${this.selectedOption?.option}
|
||||
</div>
|
||||
${this.label ? html`<div class="label">${this.label}</div>` : html``}
|
||||
<div class="selectionBox">
|
||||
${this.options.map(option => {
|
||||
${this.enableSearch && !this.opensToTop
|
||||
? html`
|
||||
<div class="search">
|
||||
<input type="text" placeholder="Search" />
|
||||
</div>
|
||||
`
|
||||
: null}
|
||||
${this.options.map((option) => {
|
||||
return html`
|
||||
<div class="option" @click=${() => {this.updateSelection(option);}}>${option.option}</div>
|
||||
`
|
||||
<div
|
||||
class="option"
|
||||
@click=${() => {
|
||||
this.updateSelection(option);
|
||||
}}
|
||||
>
|
||||
${option.option}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
${this.enableSearch && this.opensToTop
|
||||
? html`
|
||||
<div class="search">
|
||||
<input type="text" placeholder="Search" />
|
||||
</div>
|
||||
`
|
||||
: null}
|
||||
</div>
|
||||
<div
|
||||
class="selectedBox"
|
||||
@click="${(event) => {
|
||||
if (!this.isElevated) {
|
||||
this.toggleSelectionBox();
|
||||
} else {
|
||||
this.updateSelection(this.selectedOption);
|
||||
}
|
||||
}}"
|
||||
>
|
||||
${this.selectedOption?.option}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.selectedOption = this.options[0] || null;
|
||||
this.selectedOption = this.selectedOption || this.options[0] || null;
|
||||
}
|
||||
|
||||
public async updateSelection(selectedOption) {
|
||||
this.selectedOption = selectedOption;
|
||||
|
||||
this.dispatchEvent(new CustomEvent('selectedOption', {
|
||||
detail: selectedOption,
|
||||
bubbles: true
|
||||
}));
|
||||
this.openSelectionBox();
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('selectedOption', {
|
||||
detail: selectedOption,
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
if (this.isElevated) {
|
||||
this.toggleSelectionBox();
|
||||
}
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
|
||||
public openSelectionBox() {
|
||||
this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
|
||||
this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
|
||||
}
|
||||
|
||||
public closeSelectionBox() {
|
||||
|
||||
private isElevated: boolean = false;
|
||||
private windowOverlay: DeesWindowLayer;
|
||||
public async toggleSelectionBox() {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
const selectedBox: HTMLElement = this.shadowRoot.querySelector('.selectedBox');
|
||||
const selectionBox: HTMLElement = this.shadowRoot.querySelector('.selectionBox');
|
||||
if (!this.isElevated) {
|
||||
this.windowOverlay = await DeesWindowLayer.createAndShow({
|
||||
blur: false,
|
||||
});
|
||||
const elevatedDropdown = new DeesInputDropdown();
|
||||
elevatedDropdown.isElevated = true;
|
||||
elevatedDropdown.label = this.label;
|
||||
elevatedDropdown.enableSearch = this.enableSearch;
|
||||
elevatedDropdown.required = this.required;
|
||||
elevatedDropdown.disabled = this.disabled;
|
||||
elevatedDropdown.style.position = 'fixed';
|
||||
elevatedDropdown.style.top = this.getBoundingClientRect().top + 'px';
|
||||
elevatedDropdown.style.left = this.getBoundingClientRect().left + 'px';
|
||||
elevatedDropdown.style.width = this.clientWidth + 'px';
|
||||
elevatedDropdown.options = this.options;
|
||||
elevatedDropdown.selectedOption = this.selectedOption;
|
||||
console.log(elevatedDropdown.selectedOption);
|
||||
this.windowOverlay.appendChild(elevatedDropdown);
|
||||
await domtoolsInstance.convenience.smartdelay.delayFor(0);
|
||||
elevatedDropdown.toggleSelectionBox();
|
||||
const destroyOverlay = async () => {
|
||||
(elevatedDropdown.shadowRoot.querySelector('.selectionBox') as HTMLElement).style.opacity =
|
||||
'0';
|
||||
elevatedDropdown.removeEventListener('selectedOption', handleSelection);
|
||||
this.windowOverlay.removeEventListener('clicked', destroyOverlay);
|
||||
this.windowOverlay.destroy();
|
||||
};
|
||||
const handleSelection = async (event) => {
|
||||
await this.updateSelection(elevatedDropdown.selectedOption);
|
||||
destroyOverlay();
|
||||
};
|
||||
elevatedDropdown.addEventListener('selectedOption', handleSelection);
|
||||
this.windowOverlay.addEventListener('clicked', destroyOverlay);
|
||||
} else {
|
||||
if (!selectionBox.classList.contains('show')) {
|
||||
selectionBox.style.width = selectedBox.clientWidth + 'px';
|
||||
selectionBox.classList.add('show');
|
||||
const spaceData = selectedBox.getBoundingClientRect();
|
||||
if (300 > window.innerHeight - spaceData.bottom) {
|
||||
this.opensToTop = true;
|
||||
selectedBox.classList.add('accentTop');
|
||||
selectionBox.style.bottom = selectedBox.clientHeight + 2 + 'px';
|
||||
} else {
|
||||
selectedBox.classList.add('accentBottom');
|
||||
this.opensToTop = false;
|
||||
const labelOffset = this.label ? 24 : 0;
|
||||
selectionBox.style.top = selectedBox.clientHeight + labelOffset + 'px';
|
||||
}
|
||||
await domtoolsInstance.convenience.smartdelay.delayFor(0);
|
||||
const searchInput = selectionBox.querySelector('input');
|
||||
searchInput.focus();
|
||||
} else {
|
||||
selectedBox.style.pointerEvents = 'none';
|
||||
selectionBox.classList.remove('show');
|
||||
selectedBox.style.opacity = '0';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -143,6 +143,7 @@ export class DeesInputText extends DeesElement {
|
||||
border-radius: 7px;
|
||||
padding: 4px 0px;
|
||||
width: 40px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.showPassword:hover {
|
||||
@ -169,7 +170,7 @@ export class DeesInputText extends DeesElement {
|
||||
return html`
|
||||
<style>
|
||||
input {
|
||||
font-family: ${this.isPasswordBool ? 'monospace' : 'Inter'};
|
||||
font-family: ${this.isPasswordBool ? 'monospace' : 'Roboto'};
|
||||
letter-spacing: ${this.isPasswordBool ? '1px' : 'normal'};
|
||||
color: ${this.goBright ? '#333' : '#ccc'};
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user