fix(core): update
This commit is contained in:
parent
e028f37493
commit
4311c0fff6
19211
package-lock.json
generated
19211
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@ -13,20 +13,20 @@
|
||||
"author": "Lossless GmbH",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@designestate/dees-domtools": "^1.0.87",
|
||||
"@designestate/dees-domtools": "^1.0.88",
|
||||
"@designestate/dees-element": "^1.0.19",
|
||||
"@designestate/dees-wcctools": "^1.0.57",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.35",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.3",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.15.3",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
||||
"typescript": "^4.2.4"
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"typescript": "^4.3.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.25",
|
||||
"@gitzone/tsbundle": "^1.0.80",
|
||||
"@gitzone/tstest": "^1.0.52",
|
||||
"@gitzone/tswatch": "^1.0.52",
|
||||
"@gitzone/tsbuild": "^2.1.26",
|
||||
"@gitzone/tsbundle": "^1.0.84",
|
||||
"@gitzone/tstest": "^1.0.54",
|
||||
"@gitzone/tswatch": "^1.0.56",
|
||||
"@pushrocks/projectinfo": "^4.0.5",
|
||||
"@pushrocks/tapbundle": "^3.2.14",
|
||||
"tslint": "^6.1.3",
|
||||
|
@ -1,9 +1,12 @@
|
||||
import { customElement, html, TemplateResult, LitElement } from 'lit-element';
|
||||
import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element';
|
||||
|
||||
import { DeesInputCheckbox } from './dees-input-checkbox';
|
||||
import { DeesInputText } from './dees-input-text';
|
||||
import { DeesInputQuantitySelector } from './dees-input-quantityselector';
|
||||
import { DeesInputRadio } from './dees-input-radio';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
export type TFormElement = Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio>;
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -12,7 +15,7 @@ declare global {
|
||||
}
|
||||
|
||||
@customElement('dees-form')
|
||||
export class DeesForm extends LitElement {
|
||||
export class DeesForm extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px">
|
||||
<dees-input-text key="hello1" label="a text"></dees-input-text>
|
||||
@ -23,6 +26,7 @@ export class DeesForm extends LitElement {
|
||||
`;
|
||||
|
||||
public name: string = 'myform';
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
@ -35,18 +39,40 @@ export class DeesForm extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
public async gatherAndDispatch() {
|
||||
public firstUpdated() {
|
||||
const formChildren = this.getFormChildren();
|
||||
for (const child of formChildren) {
|
||||
child.changeSubject.subscribe(async (elementArg: TFormElement) => {
|
||||
const valueObject = await this.gatherData();
|
||||
this.changeSubject.next(valueObject);
|
||||
console.log(valueObject);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
public getFormChildren() {
|
||||
const children: Array<DeesElement> = this.children as any;
|
||||
const formChildren: TFormElement = [];
|
||||
|
||||
const children: Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio> = this.children as any;
|
||||
const valueObject: { [key: string]: string | number | boolean} = {};
|
||||
for (const child of children) {
|
||||
if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) {
|
||||
formChildren.push(child);
|
||||
}
|
||||
}
|
||||
return formChildren;
|
||||
}
|
||||
|
||||
public async gatherData() {
|
||||
const children = this.getFormChildren();
|
||||
const valueObject: { [key: string]: string | number | boolean} = {};
|
||||
for (const child of children) {
|
||||
valueObject[child.key] = child.value;
|
||||
}
|
||||
return valueObject;
|
||||
}
|
||||
|
||||
|
||||
console.log(valueObject);
|
||||
public async gatherAndDispatch() {
|
||||
const valueObject = await this.gatherData();
|
||||
const formDataEvent = new CustomEvent('formData', {
|
||||
detail: {
|
||||
data: valueObject
|
||||
|
@ -9,8 +9,12 @@ declare global {
|
||||
|
||||
@customElement('dees-input-checkbox')
|
||||
export class DeesInputCheckbox extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
@property()
|
||||
public key: string;
|
||||
|
||||
@ -20,6 +24,7 @@ export class DeesInputCheckbox extends DeesElement {
|
||||
@property()
|
||||
public value: boolean = false;
|
||||
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
@ -129,5 +134,6 @@ export class DeesInputCheckbox extends DeesElement {
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,4 @@
|
||||
import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
@ -12,6 +11,9 @@ declare global {
|
||||
export class DeesInputDropdown extends LitElement {
|
||||
public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
@property()
|
||||
public label: string = 'Label';
|
||||
|
||||
@ -116,6 +118,7 @@ export class DeesInputDropdown extends LitElement {
|
||||
bubbles: true
|
||||
}));
|
||||
this.toggleSelectionBox();
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
|
||||
public toggleSelectionBox() {
|
||||
|
@ -9,6 +9,8 @@ import {
|
||||
cssManager,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-input-fileupload': DeesInputFileupload;
|
||||
@ -19,6 +21,9 @@ declare global {
|
||||
export class DeesInputFileupload extends DeesElement {
|
||||
public static demo = () => html`<dees-input-fileupload></dees-input-fileupload>`;
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
@ -96,6 +101,7 @@ export class DeesInputFileupload extends DeesElement {
|
||||
public async updateValue(eventArg: Event) {
|
||||
const target: any = eventArg.target;
|
||||
this.value = target.value;
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
|
||||
public firstUpdated() {
|
||||
|
@ -11,6 +11,9 @@ declare global {
|
||||
export class DeesInputQuantitySelector extends DeesElement {
|
||||
public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
@property()
|
||||
public key: string;
|
||||
|
||||
@ -81,6 +84,7 @@ export class DeesInputQuantitySelector extends DeesElement {
|
||||
|
||||
public increase () {
|
||||
this.value++;
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
|
||||
public decrease () {
|
||||
@ -89,5 +93,6 @@ export class DeesInputQuantitySelector extends DeesElement {
|
||||
} else {
|
||||
// nothing to do here
|
||||
}
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -10,6 +11,9 @@ declare global {
|
||||
export class DeesInputRadio extends LitElement {
|
||||
public static demo = () => html`<dees-input-radio></dees-input-radio>`;
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
@property()
|
||||
public key: string;
|
||||
|
||||
@ -102,5 +106,6 @@ export class DeesInputRadio extends LitElement {
|
||||
detail: this.value,
|
||||
bubbles: true
|
||||
}));
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
}
|
@ -1,4 +1,5 @@
|
||||
import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -10,6 +11,9 @@ declare global {
|
||||
export class DeesInputText extends DeesElement {
|
||||
public static demo = () => html`<dees-input-text></dees-input-text>`;
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
@property()
|
||||
public label: string = 'Label';
|
||||
|
||||
@ -75,6 +79,6 @@ export class DeesInputText extends DeesElement {
|
||||
public async updateValue(eventArg: Event) {
|
||||
const target: any = eventArg.target;
|
||||
this.value = target.value;
|
||||
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
}
|
||||
|
@ -1 +0,0 @@
|
||||
export {}
|
Loading…
Reference in New Issue
Block a user