fix(core): update
This commit is contained in:
parent
f7ee4d77fd
commit
66bf117bfc
14
package-lock.json
generated
14
package-lock.json
generated
@ -9,7 +9,7 @@
|
||||
"version": "1.0.50",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@designestate/dees-domtools": "^1.0.89",
|
||||
"@designestate/dees-domtools": "^1.0.90",
|
||||
"@designestate/dees-element": "^1.0.19",
|
||||
"@designestate/dees-wcctools": "^1.0.57",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
@ -1893,9 +1893,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@designestate/dees-domtools": {
|
||||
"version": "1.0.89",
|
||||
"resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
|
||||
"integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
|
||||
"version": "1.0.90",
|
||||
"resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.90.tgz",
|
||||
"integrity": "sha512-tQ8tlBunWMSza+kvZaCVExJnl45jgNGuqbK9bdPBczwllUAVNLVRNaAucEeMj1SiDAKOg8zwshkQJ4AWcjSidw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@apiglobal/typedrequest": "^1.0.56",
|
||||
@ -17435,9 +17435,9 @@
|
||||
}
|
||||
},
|
||||
"@designestate/dees-domtools": {
|
||||
"version": "1.0.89",
|
||||
"resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
|
||||
"integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
|
||||
"version": "1.0.90",
|
||||
"resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.90.tgz",
|
||||
"integrity": "sha512-tQ8tlBunWMSza+kvZaCVExJnl45jgNGuqbK9bdPBczwllUAVNLVRNaAucEeMj1SiDAKOg8zwshkQJ4AWcjSidw==",
|
||||
"requires": {
|
||||
"@apiglobal/typedrequest": "^1.0.56",
|
||||
"@designestate/dees-comms": "^1.0.9",
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
"author": "Lossless GmbH",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@designestate/dees-domtools": "^1.0.89",
|
||||
"@designestate/dees-domtools": "^1.0.90",
|
||||
"@designestate/dees-element": "^1.0.19",
|
||||
"@designestate/dees-wcctools": "^1.0.57",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
|
||||
@ -27,7 +27,7 @@ export class DeesInputText extends DeesElement {
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public value: string;
|
||||
public value: string = '';
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
@ -94,7 +94,7 @@ export class DeesInputText extends DeesElement {
|
||||
</style>
|
||||
<div class="maincontainer">
|
||||
<div class="label">${this.label}</div>
|
||||
<input type="text" @input="${this.updateValue}" .disabled=${this.disabled} />
|
||||
<input type="text" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -1,26 +1,60 @@
|
||||
import { DeesElement, customElement, html, css, unsafeCSS, cssManager, property } from '@designestate/dees-element';
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
unsafeCSS,
|
||||
cssManager,
|
||||
property,
|
||||
TemplateResult,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
export interface IStep {
|
||||
title: string;
|
||||
content: TemplateResult;
|
||||
}
|
||||
|
||||
@customElement('dees-stepper')
|
||||
export class DeesStepper extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dees-stepper></dees-stepper>
|
||||
`;
|
||||
public static demo = () => html` <dees-stepper></dees-stepper> `;
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public steps: IStep[] = [
|
||||
{
|
||||
title: 'Who are you?',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-text label="Your Email" value="hello@something.com" disabled></dees-input-text>
|
||||
</dees-form>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'Verification:',
|
||||
content: html``,
|
||||
},
|
||||
{
|
||||
title: 'Verification:',
|
||||
content: html``,
|
||||
},
|
||||
{
|
||||
title: 'Verification:',
|
||||
content: html``,
|
||||
},
|
||||
];
|
||||
|
||||
@property({
|
||||
type: Object,
|
||||
})
|
||||
public selectedStep: IStep;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
@property({
|
||||
type: Array
|
||||
})
|
||||
public steps = [{
|
||||
title: 'Who are you?'
|
||||
}, {
|
||||
title: 'Verification:'
|
||||
}]
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
@ -33,29 +67,106 @@ export class DeesStepper extends DeesElement {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #111;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.step {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.7s ease-out;
|
||||
max-width: 600px;
|
||||
min-height: 300px;
|
||||
border-radius: 10px;
|
||||
background: #222;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#222')};
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
|
||||
filter: opacity(0.5);
|
||||
box-shadow: 0px 0px 3px #00000010;
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
public render () {
|
||||
.step.selected {
|
||||
filter: opacity(1);
|
||||
box-shadow: 0px 0px 5px #00000010;
|
||||
}
|
||||
|
||||
.step .stepCounter {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
border-bottom-left-radius: 10px;
|
||||
background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
|
||||
}
|
||||
|
||||
.step .title {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
font-family: Roboto;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<div class="stepperContainer">
|
||||
${this.steps.map(stepArg => html`
|
||||
<div class="step"></div>
|
||||
`)}
|
||||
${this.steps.map(
|
||||
(stepArg) =>
|
||||
html` <div class="step ${stepArg === this.selectedStep ? 'selected' : null}">
|
||||
<div class="title">${stepArg.title}</div>
|
||||
<div class="stepCounter">Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length} </div>
|
||||
<div class="content">${stepArg.content}</div>
|
||||
</div> `
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
public firstUpdated() {
|
||||
this.selectedStep = this.steps[0];
|
||||
this.setScrollStatus();
|
||||
domtools.plugins.smartdelay.delayFor(2000).then(() => {
|
||||
this.selectedStep = this.steps[1];
|
||||
domtools.plugins.smartdelay.delayFor(2000).then(() => {
|
||||
this.goBack();
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
public updated() {
|
||||
this.setScrollStatus();
|
||||
}
|
||||
|
||||
public scroller: typeof domtools.plugins.sweetScroll.prototype;
|
||||
|
||||
public async setScrollStatus() {
|
||||
await domtools.plugins.smartdelay.delayFor(50);
|
||||
const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
|
||||
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
|
||||
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
|
||||
stepperContainer.style.paddingTop = `${(stepperContainer.offsetHeight / 2) - (selectedStepElement.offsetHeight / 2)}px`;
|
||||
console.log('Setting scroll status');
|
||||
console.log(selectedStepElement);
|
||||
const scrollPosition = selectedStepElement.offsetTop - (stepperContainer.offsetHeight / 2) + (selectedStepElement.offsetHeight / 2) ;
|
||||
console.log(scrollPosition);
|
||||
const domtoolsInstance = await domtools.DomTools.setupDomTools()
|
||||
if (!this.scroller) {
|
||||
this.scroller = new domtools.plugins.sweetScroll({}, stepperContainer);
|
||||
}
|
||||
this.scroller.to(scrollPosition);
|
||||
}
|
||||
|
||||
public goBack() {
|
||||
const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep);
|
||||
this.selectedStep = this.steps[currentIndex - 1];
|
||||
}
|
||||
|
||||
public goNext() {
|
||||
const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep);
|
||||
this.selectedStep = this.steps[currentIndex - 1];
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@ export class DeesUpdater extends LitElement {
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
</style>
|
||||
<dees-windowlayer>
|
||||
<dees-windowlayer @clicked="${this.windowLayerClicked}">
|
||||
<div class="modalContainer">
|
||||
<div class="headingContainer">
|
||||
<dees-spinner .size=${60}></dees-spinner>
|
||||
@ -74,4 +74,9 @@ export class DeesUpdater extends LitElement {
|
||||
</dees-windowlayer>>
|
||||
`;
|
||||
}
|
||||
|
||||
private windowLayerClicked() {
|
||||
const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
|
||||
windowLayer.toggleVisibility();
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,8 +10,15 @@ declare global {
|
||||
|
||||
@customElement('dees-windowlayer')
|
||||
export class DeesWindowLayer extends LitElement {
|
||||
// STATIC
|
||||
public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public visible = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
@ -22,8 +29,8 @@ export class DeesWindowLayer extends LitElement {
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
.windowOverlay {
|
||||
transition: all 0.3s;
|
||||
will-change: transform;
|
||||
transition: all 1s;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
@ -33,15 +40,17 @@ export class DeesWindowLayer extends LitElement {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.0);
|
||||
backdrop-filter: blur(0px);
|
||||
backdrop-filter: brightness(1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: brightness(0.3);
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
<div class="windowOverlay">
|
||||
<div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
@ -49,7 +58,15 @@ export class DeesWindowLayer extends LitElement {
|
||||
|
||||
firstUpdated() {
|
||||
setTimeout(() => {
|
||||
this.shadowRoot.querySelector('.windowOverlay').classList.add('visible');
|
||||
this.visible = true;
|
||||
}, 100);
|
||||
}
|
||||
|
||||
dispatchClicked() {
|
||||
this.dispatchEvent(new CustomEvent('clicked'))
|
||||
}
|
||||
|
||||
public toggleVisibility () {
|
||||
this.visible = !this.visible;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user