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