fix(core): update
This commit is contained in:
parent
8390ba67b3
commit
fae10a3240
2178
package-lock.json
generated
2178
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -13,15 +13,16 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.25",
|
"@gitzone/tsbuild": "^2.1.25",
|
||||||
"@gitzone/tsbundle": "^1.0.78",
|
"@gitzone/tsbundle": "^1.0.80",
|
||||||
"@gitzone/tstest": "^1.0.44",
|
"@gitzone/tstest": "^1.0.44",
|
||||||
"@pushrocks/tapbundle": "^3.2.9",
|
"@pushrocks/tapbundle": "^3.2.14",
|
||||||
"@types/node": "^14.11.2",
|
"@types/node": "^14.14.37",
|
||||||
"tslint": "^6.1.3",
|
"tslint": "^6.1.3",
|
||||||
"tslint-config-prettier": "^1.15.0"
|
"tslint-config-prettier": "^1.15.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@designestate/dees-domtools": "^1.0.80",
|
"@designestate/dees-domtools": "^1.0.86",
|
||||||
|
"@pushrocks/isounique": "^1.0.4",
|
||||||
"@pushrocks/smartrx": "^2.0.19",
|
"@pushrocks/smartrx": "^2.0.19",
|
||||||
"lit-element": "^2.4.0"
|
"lit-element": "^2.4.0"
|
||||||
},
|
},
|
||||||
|
23
test/test.browser.ts
Normal file
23
test/test.browser.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { expect, tap } from '@pushrocks/tapbundle';
|
||||||
|
import * as deesElement from '../ts/index';
|
||||||
|
|
||||||
|
tap.test('should create a static element', async () => {
|
||||||
|
@deesElement.customElement('my-button')
|
||||||
|
class MyButton extends deesElement.DeesElement {
|
||||||
|
// STATIC
|
||||||
|
public static styles = [
|
||||||
|
deesElement.css`
|
||||||
|
.buttonClass {
|
||||||
|
background: ${deesElement.cssManager.dbTheme('blue', 'black')};
|
||||||
|
}
|
||||||
|
`
|
||||||
|
];
|
||||||
|
|
||||||
|
// INSTANCE
|
||||||
|
render() {
|
||||||
|
return deesElement.html`<div class="buttonClass">My Button</div>`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.start();
|
@ -1,6 +0,0 @@
|
|||||||
import { expect, tap } from '@pushrocks/tapbundle';
|
|
||||||
import * as deesElement from '../ts/index';
|
|
||||||
|
|
||||||
tap.test('first test', async () => {});
|
|
||||||
|
|
||||||
tap.start();
|
|
38
ts/dees-element.classes.cssmanager.ts
Normal file
38
ts/dees-element.classes.cssmanager.ts
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { CSSResult } from 'lit-element';
|
||||||
|
import * as plugins from './dees-element.plugins';
|
||||||
|
|
||||||
|
export interface IDbVarTriplet {
|
||||||
|
cssVarName: string;
|
||||||
|
darkValue: string;
|
||||||
|
brightValue: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class CssManager {
|
||||||
|
public dbVarTripletStore: IDbVarTriplet[] = [];
|
||||||
|
|
||||||
|
public dbTheme(darkValueArg: string, brightValueArg: string): CSSResult {
|
||||||
|
const existingTriplet = this.dbVarTripletStore.find(tripletArg => tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg);
|
||||||
|
if (existingTriplet) {
|
||||||
|
return plugins.litElement.unsafeCSS(existingTriplet.cssVarName)
|
||||||
|
} else {
|
||||||
|
const newTriplet: IDbVarTriplet = {
|
||||||
|
cssVarName: `--${plugins.isounique.uni()}`,
|
||||||
|
brightValue: brightValueArg,
|
||||||
|
darkValue: darkValueArg
|
||||||
|
}
|
||||||
|
this.dbVarTripletStore.push(newTriplet)
|
||||||
|
document.body.style.setProperty(newTriplet.cssVarName, newTriplet.darkValue);
|
||||||
|
return plugins.litElement.unsafeCSS(newTriplet.cssVarName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number): CSSResult => {
|
||||||
|
let returnString = ``;
|
||||||
|
for (let i = 0; i < amountOfColumnsArg; i++) {
|
||||||
|
returnString += ` calc((100%/${amountOfColumnsArg}) - (${
|
||||||
|
gapSizeArg * (amountOfColumnsArg - 1)
|
||||||
|
}px/${amountOfColumnsArg}))`;
|
||||||
|
}
|
||||||
|
return plugins.litElement.unsafeCSS(returnString);
|
||||||
|
};
|
||||||
|
}
|
38
ts/dees-element.classes.dees-element.ts
Normal file
38
ts/dees-element.classes.dees-element.ts
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import * as plugins from './dees-element.plugins';
|
||||||
|
|
||||||
|
export class DeesElement extends plugins.litElement.LitElement {
|
||||||
|
// INSTANCE
|
||||||
|
@plugins.litElement.property({ type: Boolean })
|
||||||
|
public goBright: boolean = false;
|
||||||
|
|
||||||
|
// domtools
|
||||||
|
public domtoolsPromise = plugins.domtools.elementBasic.setup(this);
|
||||||
|
|
||||||
|
@plugins.litElement.property()
|
||||||
|
domtools?: plugins.domtools.DomTools;
|
||||||
|
|
||||||
|
private themeSubscription: plugins.smartrx.rxjs.Subscription;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.domtoolsPromise.then((domtoolsArg) => {
|
||||||
|
this.domtools = domtoolsArg;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public connectedCallback() {
|
||||||
|
super.connectedCallback();
|
||||||
|
this.domtoolsPromise.then(async (domtools) => {
|
||||||
|
this.themeSubscription = domtools.themeManager.themeObservable.subscribe((goBrightArg) => {
|
||||||
|
this.goBright = goBrightArg;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.dispatchEvent(new CustomEvent('deesElementConnected'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public disconnectedCallback() {
|
||||||
|
super.disconnectedCallback();
|
||||||
|
this.themeSubscription.unsubscribe();
|
||||||
|
this.dispatchEvent(new CustomEvent('deesElementDisconnected'));
|
||||||
|
}
|
||||||
|
}
|
@ -1,13 +1,17 @@
|
|||||||
// pushrocks scope
|
// pushrocks scope
|
||||||
|
import * as isounique from '@pushrocks/isounique';
|
||||||
import * as smartrx from '@pushrocks/smartrx';
|
import * as smartrx from '@pushrocks/smartrx';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
isounique,
|
||||||
smartrx
|
smartrx
|
||||||
};
|
};
|
||||||
|
|
||||||
// third party scope
|
// third party scope
|
||||||
import { LitElement, property } from 'lit-element';
|
import { css, unsafeCSS, LitElement, property } from 'lit-element';
|
||||||
const litElement = {
|
const litElement = {
|
||||||
|
css,
|
||||||
|
unsafeCSS,
|
||||||
LitElement,
|
LitElement,
|
||||||
property
|
property
|
||||||
};
|
};
|
||||||
|
45
ts/index.ts
45
ts/index.ts
@ -1,47 +1,16 @@
|
|||||||
|
import { CssManager } from './dees-element.classes.cssmanager';
|
||||||
import * as plugins from './dees-element.plugins';
|
import * as plugins from './dees-element.plugins';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
property,
|
|
||||||
html,
|
|
||||||
customElement,
|
customElement,
|
||||||
TemplateResult,
|
property,
|
||||||
internalProperty,
|
internalProperty,
|
||||||
|
html,
|
||||||
|
TemplateResult,
|
||||||
css,
|
css,
|
||||||
unsafeCSS,
|
unsafeCSS
|
||||||
} from 'lit-element';
|
} from 'lit-element';
|
||||||
|
|
||||||
export class DeesElement extends plugins.litElement.LitElement {
|
export { DeesElement } from './dees-element.classes.dees-element';
|
||||||
@plugins.litElement.property({ type: Boolean })
|
|
||||||
public goBright: boolean = false;
|
|
||||||
|
|
||||||
// domtools
|
export const cssManager = new CssManager();
|
||||||
public domtoolsPromise = plugins.domtools.elementBasic.setup(this);
|
|
||||||
|
|
||||||
@plugins.litElement.property()
|
|
||||||
domtools?: plugins.domtools.DomTools;
|
|
||||||
|
|
||||||
private themeSubscription: plugins.smartrx.rxjs.Subscription;
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.domtoolsPromise.then((domtoolsArg) => {
|
|
||||||
this.domtools = domtoolsArg;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
public connectedCallback() {
|
|
||||||
super.connectedCallback();
|
|
||||||
this.domtoolsPromise.then(async (domtools) => {
|
|
||||||
this.themeSubscription = domtools.themeManager.themeObservable.subscribe((goBrightArg) => {
|
|
||||||
this.goBright = goBrightArg;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.dispatchEvent(new CustomEvent('deesElementConnected'));
|
|
||||||
}
|
|
||||||
|
|
||||||
public disconnectedCallback() {
|
|
||||||
super.disconnectedCallback();
|
|
||||||
this.themeSubscription.unsubscribe();
|
|
||||||
this.dispatchEvent(new CustomEvent('deesElementDisconnected'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user