design.estate/dees-catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2021-08-26 21:30:35 +02:00
parent c1594736ec
commit 9d5f0b5ff8
9 changed files with 109 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@ -9,7 +9,7 @@
"version": "1.0.41",
"license": "MIT",
"dependencies": {
"@designestate/dees-domtools": "^1.0.88",
"@designestate/dees-domtools": "^1.0.89",
"@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.88",
"resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.88.tgz",
"integrity": "sha512-OTcZtJFPe5iQhASkX+ccvbX2IJssImzsbd6jVMw9x/NTRgffjdNFw2aGo+8AYjyMEoxSJ0Th+uPAy2dyCcOmYw==",
"version": "1.0.89",
"resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
"integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
"license": "MIT",
"dependencies": {
"@apiglobal/typedrequest": "^1.0.56",
@ -17435,9 +17435,9 @@
}
},
"@designestate/dees-domtools": {
"version": "1.0.88",
"resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.88.tgz",
"integrity": "sha512-OTcZtJFPe5iQhASkX+ccvbX2IJssImzsbd6jVMw9x/NTRgffjdNFw2aGo+8AYjyMEoxSJ0Th+uPAy2dyCcOmYw==",
"version": "1.0.89",
"resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
"integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
"requires": {
"@apiglobal/typedrequest": "^1.0.56",
"@designestate/dees-comms": "^1.0.9",

2
package.json
View File

@ -13,7 +13,7 @@
"author": "Lossless GmbH",
"license": "MIT",
"dependencies": {
"@designestate/dees-domtools": "^1.0.88",
"@designestate/dees-domtools": "^1.0.89",
"@designestate/dees-element": "^1.0.19",
"@designestate/dees-wcctools": "^1.0.57",
"@fortawesome/fontawesome-svg-core": "^1.2.36",

36
ts_web/elements/dees-form.ts
View File

@ -18,7 +18,12 @@ declare global {
@customElement('dees-form')
export class DeesForm extends DeesElement {
public static demo = () => html`
<dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px">
<dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px" @formData=${async (eventArg) => {
const form: DeesForm = eventArg.currentTarget;
form.setStatus('freeze', 'authenticating...');
await domtools.plugins.smartdelay.delayFor(1000);
form.setStatus('success', 'authenticated!');
}}>
<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-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
@ -65,8 +70,7 @@ export class DeesForm extends DeesElement {
return formChildren;
}
public async checkRequiredStatus() {
console.log('checking the required status.')
public getSubmitButton() {
const children: Array<DeesElement> = this.children as any;
let submitButton: DeesFormSubmit;
for (const childArg of children) {
@ -74,6 +78,12 @@ export class DeesForm extends DeesElement {
submitButton = childArg;
}
}
return submitButton;
}
public async checkRequiredStatus() {
console.log('checking the required status.')
let requiredOK = true;
for (const childArg of this.getFormChildren()) {
@ -81,8 +91,7 @@ export class DeesForm extends DeesElement {
requiredOK = false;
}
}
submitButton.disabled = !requiredOK;
console.log(submitButton);
this.getSubmitButton().disabled = !requiredOK;
}
public async gatherData() {
@ -106,4 +115,21 @@ export class DeesForm extends DeesElement {
console.log('dispatched data:')
console.log(valueObject);
}
public setStatus (visualStateArg: 'normal' | 'freeze' | 'error' | 'success', textStateArg: string) {
const inputChildren = this.getFormChildren();
const submitButton = this.getSubmitButton();
switch(visualStateArg) {
case 'freeze':
submitButton.disabled = true;
for (const inputChild of inputChildren) {
inputChild.disabled = true;
}
break;
}
submitButton.text = textStateArg;
}
}

17
ts_web/elements/dees-input-checkbox.ts
View File

@ -4,6 +4,8 @@ import {
TemplateResult,
property,
html,
css,
cssManager
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@ -41,6 +43,11 @@ export class DeesInputCheckbox extends DeesElement {
})
public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
@ -95,6 +102,11 @@ export class DeesInputCheckbox extends DeesElement {
border: 1px solid #039BE5;
}
.checkbox.disabled {
background: none;
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
}
.checkmark {
display: inline-block;
width: 22px;
@ -127,7 +139,7 @@ export class DeesInputCheckbox extends DeesElement {
}
</style>
<div class="maincontainer" @click="${this.toggleSelected}">
<div class="checkbox ${this.value ? 'selected' : ''}">
<div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}">
${this.value
? html`
<span class="checkmark">
@ -143,6 +155,9 @@ export class DeesInputCheckbox extends DeesElement {
}
public async toggleSelected() {
if (this.disabled) {
return;
}
this.value = !this.value;
this.dispatchEvent(
new CustomEvent('newValue', {

5
ts_web/elements/dees-input-dropdown.ts
View File

@ -35,6 +35,11 @@ export class DeesInputDropdown extends LitElement {
})
public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}

7
ts_web/elements/dees-input-fileupload.ts
View File

@ -47,8 +47,13 @@ export class DeesInputFileupload extends DeesElement {
})
public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
constructor() {
super();
super()
}
public static styles = [

5
ts_web/elements/dees-input-quantityselector.ts
View File

@ -27,6 +27,11 @@ export class DeesInputQuantitySelector extends DeesElement {
})
public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
constructor() {
super();
}

5
ts_web/elements/dees-input-radio.ts
View File

@ -28,6 +28,11 @@ export class DeesInputRadio extends LitElement {
})
public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
constructor() {
super();
}

38
ts_web/elements/dees-input-text.ts
View File

@ -1,4 +1,4 @@
import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
import {customElement, DeesElement, TemplateResult, property, html, cssManager} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
@ -14,13 +14,19 @@ export class DeesInputText extends DeesElement {
// INSTANCE
public changeSubject = new domtools.rxjs.Subject();
@property()
@property({
type: String
})
public label: string = 'Label';
@property()
@property({
type: String
})
public key: string;
@property()
@property({
type: String
})
public value: string;
@property({
@ -28,6 +34,11 @@ export class DeesInputText extends DeesElement {
})
public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
public render(): TemplateResult {
return html `
<style>
@ -65,8 +76,15 @@ export class DeesInputText extends DeesElement {
line-height: 48px;
transition: all 0.2s;
outline: none;
color: #ccc;
font-size: 16px;
color: ${this.goBright ? '#333' : '#ccc'};
}
input:disabled {
background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
color: #9b9b9e;
cursor: default;
}
input:focus {
@ -76,7 +94,7 @@ export class DeesInputText extends DeesElement {
</style>
<div class="maincontainer">
<div class="label">${this.label}</div>
<input type="text" @input="${this.updateValue}" />
<input type="text" @input="${this.updateValue}" .disabled=${this.disabled} />
</div>
`;
}
@ -86,4 +104,12 @@ export class DeesInputText extends DeesElement {
this.value = target.value;
this.changeSubject.next(this);
}
public async freeze() {
this.disabled = true;
}
public async unfreeze() {
this.disabled = false;
}
}