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 = {
name: '@design.estate/dees-catalog',
version: '1.0.232',
version: '1.0.233',
description: 'website for lossless.com'
}

View File

@ -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"

View File

@ -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>
`

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 { 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,25 +36,29 @@ 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`
@ -52,10 +67,11 @@ export class DeesInputDropdown extends DeesElement {
}
:host {
font-family: Roboto;
position: relative;
display: block;
height: 40px;
color: ${cssManager.bdTheme('#222', '#fff')};
margin-bottom: 24px;
}
.maincontainer {
@ -64,50 +80,53 @@ export class DeesInputDropdown extends DeesElement {
.label {
font-size: 14px;
margin-bottom: 15px;
margin-bottom: 4px;
}
.selectedBox {
user-select: none;
cursor: pointer;
position: relative;
max-width: 420px;
height: 40px;
line-height: 40px;
padding: 0px 8px;
z-index: 0px;
background: ${cssManager.bdTheme('#ffffff', '#333333')};
background: ${cssManager.bdTheme('#fafafa', '#222')};
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;
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;
}
.accentBottom {
border-bottom: 1px solid #e4002b;
}
.selectionBox {
will-change:transform;
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);
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);
transform: scale(0.99, 0.99);
position: absolute;
}
.selectionBox.show {
pointer-events: all;
opacity: 1;
transform: scale(1,1);
transform: scale(1, 1);
}
.option {
@ -122,47 +141,161 @@ export class DeesInputDropdown extends DeesElement {
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 => {
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}
${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>
`;
}
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', {
this.dispatchEvent(
new CustomEvent('selectedOption', {
detail: selectedOption,
bubbles: true
}));
this.openSelectionBox();
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');
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';
}
}
public closeSelectionBox() {
}
}

View File

@ -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'};
}