fix(core): update

This commit is contained in:
Philipp Kunz 2024-01-15 19:42:15 +01:00
parent e473364d40
commit 0b2f6715e0
15 changed files with 185 additions and 44 deletions

View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '1.0.243', version: '1.0.244',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -0,0 +1,11 @@
export const dark = {
blue: '#0050b9',
blueActive: '#0069f2',
text: '#ffffff',
}
export const bright = {
blue: '#0050b9',
blueActive: '#0069f2',
text: '#333333',
}

View File

@ -1,5 +1,5 @@
import { html } from '@design.estate/dees-element'; import { html } from '@design.estate/dees-element';
import * as plugins from './plugins.js'; import * as plugins from './00plugins.js';
import { DeesContextmenu } from './dees-contextmenu.js'; import { DeesContextmenu } from './dees-contextmenu.js';

View File

@ -1,5 +1,5 @@
import { demoFunc } from './dees-contextmenu.demo.js'; import { demoFunc } from './dees-contextmenu.demo.js';
import * as plugins from './plugins.js'; import * as plugins from './00plugins.js';
import { import {
customElement, customElement,
html, html,

View File

@ -50,6 +50,7 @@ import {
faEyeSlash as faEyeSlashSolid, faEyeSlash as faEyeSlashSolid,
faFileInvoice as faFileInvoiceSolid, faFileInvoice as faFileInvoiceSolid,
faFileInvoiceDollar as faFileInvoiceDollarSolid, faFileInvoiceDollar as faFileInvoiceDollarSolid,
faGear as faGearSolid,
faGrip as faGripSolid, faGrip as faGripSolid,
faMessage as faMessageSolid, faMessage as faMessageSolid,
faMoneyCheckDollar as faMoneyCheckDollarSolid, faMoneyCheckDollar as faMoneyCheckDollarSolid,
@ -93,6 +94,7 @@ export const faIcons = {
eyeSlash: faEyeSlashSolid, eyeSlash: faEyeSlashSolid,
fileInvoice: faFileInvoiceSolid, fileInvoice: faFileInvoiceSolid,
fileInvoiceDoller: faFileInvoiceDollarSolid, fileInvoiceDoller: faFileInvoiceDollarSolid,
gear: faGearSolid,
grip: faGripSolid, grip: faGripSolid,
message: faMessageRegular, message: faMessageRegular,
messageSolid: faMessageSolid, messageSolid: faMessageSolid,

View File

@ -1,4 +1,4 @@
import * as plugins from './plugins.js'; import * as plugins from './00plugins.js';
import { import {
cssManager, cssManager,
css, css,

View File

@ -1,4 +1,4 @@
import * as plugins from './plugins.js'; import * as plugins from './00plugins.js';
import { demoFunc } from './dees-modal.demo.js'; import { demoFunc } from './dees-modal.demo.js';
import { import {
customElement, customElement,

View File

@ -0,0 +1,11 @@
import { html } from '@design.estate/dees-element';
import { DeesProgressbar } from './dees-progressbar.js';
export const demoFunc = () => {
return html`
<dees-progressbar
.percentage=${50}
></dees-progressbar>
`;
}

View File

@ -0,0 +1,95 @@
import * as plugins from './00plugins.js';
import * as colors from './00colors.js';
import { demoFunc } from './dees-progressbar.demo.js';
import {
customElement,
html,
DeesElement,
property,
type TemplateResult,
cssManager,
css,
type CSSResult,
unsafeCSS,
unsafeHTML,
state,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
@customElement('dees-progressbar')
export class DeesProgressbar extends DeesElement {
// STATIC
public static demo = demoFunc;
// INSTANCE
@property({
type: Number,
})
public percentage = 0;
public static styles = [
cssManager.defaultStyles,
css`
:host {
color: ${cssManager.bdTheme(colors.bright.text, colors.dark.text)};
}
.progressBarContainer {
padding: 8px;
min-width: 200px;
}
.progressBar {
background: ${cssManager.bdTheme('#eeeeeb', '#444')};
height: 8px;
width: 100%;
border-radius: 4px;
border-top: 0.5px solid ${cssManager.bdTheme('none', '#555')};
}
.progressBarFill {
background: ${cssManager.bdTheme(colors.dark.blueActive, colors.bright.blueActive)};
height: 8px;
margin-top: -0.5px;
transition: 0.2s width;
border-radius: 4px;
width: 0px;
border-top: 0.5 solid ${cssManager.bdTheme('none', '#398fff')};
}
.progressText {
padding: 8px;
text-align: center;
}
`
];
public render() {
return html`
<div class="progressBarContainer">
<div class="progressBar">
<div class="progressBarFill"></div>
<div class="progressText">
${this.percentage}%
<div>
</div>
</div>
`
}
firstUpdated (_changedProperties: Map<string | number | symbol, unknown>): void {
super.firstUpdated(_changedProperties);
this.updateComplete.then(() => {
this.updatePercentage();
});
}
public async updatePercentage() {
const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement;
progressBarFill.style.width = `${this.percentage}%`;
}
updated(){
this.updatePercentage();
}
}

View File

@ -1,5 +1,5 @@
import { type ITableAction } from './dees-table.js'; import { type ITableAction } from './dees-table.js';
import * as plugins from './plugins.js'; import * as plugins from './00plugins.js';
import { html } from '@design.estate/dees-element'; import { html } from '@design.estate/dees-element';
interface ITableDemoData { interface ITableDemoData {

View File

@ -1,4 +1,4 @@
import * as plugins from './plugins.js'; import * as plugins from './00plugins.js';
import { demoFunc } from './dees-table.demo.js'; import { demoFunc } from './dees-table.demo.js';
import { import {
customElement, customElement,

View File

@ -2,6 +2,9 @@ import { html } from '@design.estate/dees-element';
import { DeesUpdater } from './dees-updater.js'; import { DeesUpdater } from './dees-updater.js';
export const demoFunc = () => { export const demoFunc = async () => {
const updater = await DeesUpdater.createAndShow();
setTimeout(async () => {
await updater.destroy();
}, 10000);
} }

View File

@ -1,4 +1,12 @@
import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, domtools } from '@design.estate/dees-element'; import {
customElement,
DeesElement,
type TemplateResult,
html,
property,
type CSSResult,
domtools,
} from '@design.estate/dees-element';
import { demoFunc } from './dees-updater.demo.js'; import { demoFunc } from './dees-updater.demo.js';
import './dees-windowlayer'; import './dees-windowlayer';
@ -15,7 +23,9 @@ export class DeesUpdater extends DeesElement {
public static demo = demoFunc; public static demo = demoFunc;
public static async createAndShow() { public static async createAndShow() {
const updater = new DeesUpdater();
document.body.appendChild(updater);
return updater;
} }
@property({ @property({
@ -64,29 +74,37 @@ export class DeesUpdater extends DeesElement {
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
} }
` `,
] ];
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<dees-windowlayer @clicked="${this.windowLayerClicked}" .options=${{ <dees-windowlayer
@clicked="${this.windowLayerClicked}"
.options=${{
blur: true, blur: true,
}}> }}
>
<div class="modalContainer"> <div class="modalContainer">
<div class="headingContainer"> <div class="headingContainer">
<dees-spinner .size=${60}></dees-spinner> <dees-spinner .size=${60}></dees-spinner>
<h1>Updating the application...</h1> <h1>Updating the application...</h1>
</div> </div>
<div class="progress">
<dees-progressbar .progress=${0.5}></dees-progressbar>
</div>
<div class="buttonContainer"> <div class="buttonContainer">
<dees-button>More info</dees-button> <dees-button>More info</dees-button>
<dees-button>Changelog</dees-button> <dees-button>Changelog</dees-button>
</div> </div>
</div> </div> </dees-windowlayer
</dees-windowlayer>> >>
`; `;
} }
private windowLayerClicked() { public async destroy() {
this.parentElement.removeChild(this);
}
} private windowLayerClicked() {}
} }

View File

@ -14,6 +14,7 @@ export * from './dees-input-fileupload.js';
export * from './dees-input-iban.js'; export * from './dees-input-iban.js';
export * from './dees-input-typelist.js'; export * from './dees-input-typelist.js';
export * from './dees-input-phone.js'; export * from './dees-input-phone.js';
export * from './dees-progressbar.js';
export * from './dees-input-quantityselector.js'; export * from './dees-input-quantityselector.js';
export * from './dees-input-radio.js'; export * from './dees-input-radio.js';
export * from './dees-input-text.js'; export * from './dees-input-text.js';