fix(core): update

This commit is contained in:
Philipp Kunz 2023-04-12 02:47:45 +02:00
parent d6047f2e78
commit f75a3714ae
7 changed files with 56 additions and 20 deletions

View File

@ -10,11 +10,9 @@
/> />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="preconnect" href="https://rsms.me/"> <!--Lets load standard fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style> <style>
body { body {

View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@designestate/dees-catalog', name: '@designestate/dees-catalog',
version: '1.0.169', version: '1.0.170',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -29,7 +29,7 @@ export class DeesFormSubmit extends DeesElement {
public text: string; public text: string;
@property({ @property({
type: String type: String,
}) })
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal'; public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
@ -41,7 +41,12 @@ export class DeesFormSubmit extends DeesElement {
public render() { public render() {
return html` return html`
<dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled} .text=${this.text ? this.text : this.textContent}> <dees-button
status=${this.status}
@click=${this.submit}
.disabled=${this.disabled}
.text=${this.text ? this.text : this.textContent}
>
</dees-button> </dees-button>
`; `;
} }
@ -53,4 +58,12 @@ export class DeesFormSubmit extends DeesElement {
const parentElement: DeesForm = this.parentElement as DeesForm; const parentElement: DeesForm = this.parentElement as DeesForm;
parentElement.gatherAndDispatch(); parentElement.gatherAndDispatch();
} }
public async focus() {
const domtools = await this.domtoolsPromise;
if (!this.disabled) {
domtools.convenience.smartdelay.delayFor(0);
this.submit();
}
}
} }

View File

@ -54,7 +54,7 @@ export class DeesForm extends DeesElement {
`; `;
} }
public firstUpdated() { public async firstUpdated() {
const formChildren = this.getFormChildren(); const formChildren = this.getFormChildren();
this.checkRequiredStatus(); this.checkRequiredStatus();
for (const child of formChildren) { for (const child of formChildren) {
@ -65,6 +65,7 @@ export class DeesForm extends DeesElement {
this.checkRequiredStatus(); this.checkRequiredStatus();
}); });
} }
await this.instrumentBehaviours();
} }
public getFormChildren() { public getFormChildren() {
@ -170,4 +171,21 @@ export class DeesForm extends DeesElement {
submitButton.text = textStateArg; submitButton.text = textStateArg;
} }
public async instrumentBehaviours() {
const children = this.getFormChildren();
for (const child of children) {
child.addEventListener('keydown', (eventArg) => {
if (eventArg.key === 'Enter') {
const currentIndex = children.indexOf(child);
if (currentIndex < children.length - 1) {
children[currentIndex + 1].focus();
} else {
children[currentIndex].blur();
this.getSubmitButton().focus();
}
}
});
}
}
} }

View File

@ -163,4 +163,9 @@ export class DeesInputText extends DeesElement {
const textInput = this.shadowRoot.querySelector('input'); const textInput = this.shadowRoot.querySelector('input');
textInput.focus(); textInput.focus();
} }
public async blur() {
const textInput = this.shadowRoot.querySelector('input');
textInput.blur();
}
} }

View File

@ -48,15 +48,15 @@ export class DeesStepper extends DeesElement {
`, `,
validationFunc: async (stepperArg, elementArg) => { validationFunc: async (stepperArg, elementArg) => {
const deesForm = elementArg.querySelector('dees-form'); const deesForm = elementArg.querySelector('dees-form');
deesForm.addEventListener('formData', eventArg => { deesForm.addEventListener('formData', (eventArg) => {
stepperArg.goNext(); stepperArg.goNext();
}) });
} },
}, },
{ {
title: 'Whats your mobile number?', title: 'Whats your mobile number?',
content: html``, content: html``,
} },
] as IStep[]} ] as IStep[]}
></dees-stepper> ></dees-stepper>
`; `;
@ -195,24 +195,26 @@ export class DeesStepper extends DeesElement {
return this.steps.findIndex((stepArg2) => stepArg === stepArg2); return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
}; };
public firstUpdated() { public async firstUpdated() {
await this.domtoolsPromise;
await this.domtools.convenience.smartdelay.delayFor(0);
this.selectedStep = this.steps[0]; this.selectedStep = this.steps[0];
this.setScrollStatus(); this.setScrollStatus();
} }
public updated() { public async updated() {
if (this.selectedStep) {
this.setScrollStatus(); this.setScrollStatus();
} }
}
public scroller: typeof domtools.plugins.SweetScroll.prototype; public scroller: typeof domtools.plugins.SweetScroll.prototype;
public async setScrollStatus() { public async setScrollStatus() {
await domtools.plugins.smartdelay.delayFor(50);
const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer'); const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step'); const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected'); const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
if (!selectedStepElement) {
return;
}
if (!stepperContainer.style.paddingTop) { if (!stepperContainer.style.paddingTop) {
stepperContainer.style.paddingTop = `${ stepperContainer.style.paddingTop = `${
stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2 stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2