fix(core): update

This commit is contained in:
Philipp Kunz 2023-12-08 18:15:40 +01:00
parent 7708c89fe1
commit 4d5a490e80
5 changed files with 262 additions and 99 deletions

View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '1.0.232', version: '1.0.233',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -20,9 +20,22 @@ export const demoFunc = () => html`
form.setStatus('success', 'authenticated!'); 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="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="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 <dees-input-checkbox
.required="${true}" .required="${true}"
key="hello3" key="hello3"

View File

@ -8,4 +8,20 @@ export const demoFunc = () => html`
{option: 'option 3', key: 'option3'} {option: 'option 3', key: 'option3'}
]} ]}
></dees-input-dropdown> ></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>
` `

View File

@ -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 * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-input-dropdown.demo.js'; import { demoFunc } from './dees-input-dropdown.demo.js';
import { DeesWindowLayer } from './dees-windowlayer.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@ -10,7 +21,7 @@ declare global {
@customElement('dees-input-dropdown') @customElement('dees-input-dropdown')
export class DeesInputDropdown extends DeesElement { export class DeesInputDropdown extends DeesElement {
public static demo = demoFunc public static demo = demoFunc;
// INSTANCE // INSTANCE
public changeSubject = new domtools.plugins.smartrx.rxjs.Subject(); public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
@ -25,25 +36,29 @@ export class DeesInputDropdown extends DeesElement {
public key: string; public key: string;
@property() @property()
public options: {option: string, key: string, payload?: any}[] = []; public options: { option: string; key: string; payload?: any }[] = [];
@property() @property()
public selectedOption: {option: string, key: string, payload?: any} = { public selectedOption: { option: string; key: string; payload?: any } = null;
key: null,
option: null,
payload: null
};
@property({ @property({
type: Boolean type: Boolean,
}) })
public required: boolean = false; public required: boolean = false;
@property({ @property({
type: Boolean type: Boolean,
})
public enableSearch: boolean = true;
@property({
type: Boolean,
}) })
public disabled: boolean = false; public disabled: boolean = false;
@state()
public opensToTop: boolean = false;
public static styles = [ public static styles = [
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
@ -52,10 +67,11 @@ export class DeesInputDropdown extends DeesElement {
} }
:host { :host {
font-family: Roboto;
position: relative; position: relative;
display: block; display: block;
height: 40px;
color: ${cssManager.bdTheme('#222', '#fff')}; color: ${cssManager.bdTheme('#222', '#fff')};
margin-bottom: 24px;
} }
.maincontainer { .maincontainer {
@ -64,50 +80,53 @@ export class DeesInputDropdown extends DeesElement {
.label { .label {
font-size: 14px; font-size: 14px;
margin-bottom: 15px; margin-bottom: 4px;
} }
.selectedBox { .selectedBox {
user-select: none;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
max-width: 420px; max-width: 420px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
padding: 0px 8px; padding: 0px 8px;
z-index: 0px; background: ${cssManager.bdTheme('#fafafa', '#222')};
background: ${cssManager.bdTheme('#ffffff', '#333333')};
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')}; box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
border-radius: 3px; border-radius: 3px;
border-top: 1px solid #CCCCCC00; border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
border-bottom: 1px solid #66666600; border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
transition: all 0.2s ease;
} }
.selectedBox.show { .accentTop {
border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#666666')}; border-top: 1px solid #e4002b;
border-bottom: 1px solid ${cssManager.bdTheme('#fafafa', '#222222')}; }
.accentBottom {
border-bottom: 1px solid #e4002b;
} }
.selectionBox { .selectionBox {
will-change:transform; will-change: transform;
pointer-events: none; pointer-events: none;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
opacity: 0; opacity: 0;
position: absolute;
background: ${cssManager.bdTheme('#ffffff', '#222222')}; background: ${cssManager.bdTheme('#ffffff', '#222222')};
max-width: 420px; max-width: 420px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
min-height: 40px; min-height: 40px;
z-index: 100;
border-radius: 3px; border-radius: 3px;
padding: 4px; padding: 4px;
transform: scale(0.99,0.99); transform: scale(0.99, 0.99);
position: absolute;
} }
.selectionBox.show { .selectionBox.show {
pointer-events: all; pointer-events: all;
opacity: 1; opacity: 1;
transform: scale(1,1); transform: scale(1, 1);
} }
.option { .option {
@ -122,47 +141,161 @@ export class DeesInputDropdown extends DeesElement {
padding-left: 8px; padding-left: 8px;
background: #0277bd; 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 { public render(): TemplateResult {
return html` return html`
<div class="maincontainer"> <div class="maincontainer">
<div class="selectedBox show" @click="${event => {this.openSelectionBox();}}"> ${this.label ? html`<div class="label">${this.label}</div>` : html``}
${this.selectedOption?.option}
</div>
<div class="selectionBox"> <div class="selectionBox">
${this.options.map(option => { ${this.enableSearch && !this.opensToTop
return html` ? html`
<div class="option" @click=${() => {this.updateSelection(option);}}>${option.option}</div> <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>
`;
})} })}
${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>
</div> </div>
`; `;
} }
firstUpdated() { firstUpdated() {
this.selectedOption = this.options[0] || null; this.selectedOption = this.selectedOption || this.options[0] || null;
} }
public async updateSelection(selectedOption) { public async updateSelection(selectedOption) {
this.selectedOption = selectedOption; this.selectedOption = selectedOption;
this.dispatchEvent(new CustomEvent('selectedOption', { this.dispatchEvent(
new CustomEvent('selectedOption', {
detail: selectedOption, detail: selectedOption,
bubbles: true bubbles: true,
})); })
this.openSelectionBox(); );
if (this.isElevated) {
this.toggleSelectionBox();
}
this.changeSubject.next(this); this.changeSubject.next(this);
} }
public openSelectionBox() { private isElevated: boolean = false;
this.shadowRoot.querySelector('.selectedBox').classList.toggle('show'); private windowOverlay: DeesWindowLayer;
this.shadowRoot.querySelector('.selectionBox').classList.toggle('show'); 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';
}
} }
public closeSelectionBox() {
} }
} }

View File

@ -143,6 +143,7 @@ export class DeesInputText extends DeesElement {
border-radius: 7px; border-radius: 7px;
padding: 4px 0px; padding: 4px 0px;
width: 40px; width: 40px;
z-index: 3;
} }
.showPassword:hover { .showPassword:hover {
@ -169,7 +170,7 @@ export class DeesInputText extends DeesElement {
return html` return html`
<style> <style>
input { input {
font-family: ${this.isPasswordBool ? 'monospace' : 'Inter'}; font-family: ${this.isPasswordBool ? 'monospace' : 'Roboto'};
letter-spacing: ${this.isPasswordBool ? '1px' : 'normal'}; letter-spacing: ${this.isPasswordBool ? '1px' : 'normal'};
color: ${this.goBright ? '#333' : '#ccc'}; color: ${this.goBright ? '#333' : '#ccc'};
} }