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 = {
name: '@design.estate/dees-catalog',
version: '1.0.243',
version: '1.0.244',
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 * as plugins from './plugins.js';
import * as plugins from './00plugins.js';
import { DeesContextmenu } from './dees-contextmenu.js';

View File

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

View File

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

View File

@ -1,4 +1,4 @@
import * as plugins from './plugins.js';
import * as plugins from './00plugins.js';
import {
cssManager,
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 {
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 * as plugins from './plugins.js';
import * as plugins from './00plugins.js';
import { html } from '@design.estate/dees-element';
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 {
customElement,

View File

@ -2,6 +2,9 @@ import { html } from '@design.estate/dees-element';
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 './dees-windowlayer';
@ -15,7 +23,9 @@ export class DeesUpdater extends DeesElement {
public static demo = demoFunc;
public static async createAndShow() {
const updater = new DeesUpdater();
document.body.appendChild(updater);
return updater;
}
@property({
@ -64,29 +74,37 @@ export class DeesUpdater extends DeesElement {
display: grid;
grid-template-columns: 50% 50%;
}
`
]
`,
];
public render(): TemplateResult {
return html`
<dees-windowlayer @clicked="${this.windowLayerClicked}" .options=${{
<dees-windowlayer
@clicked="${this.windowLayerClicked}"
.options=${{
blur: true,
}}>
}}
>
<div class="modalContainer">
<div class="headingContainer">
<dees-spinner .size=${60}></dees-spinner>
<h1>Updating the application...</h1>
</div>
<div class="progress">
<dees-progressbar .progress=${0.5}></dees-progressbar>
</div>
<div class="buttonContainer">
<dees-button>More info</dees-button>
<dees-button>Changelog</dees-button>
</div>
</div>
</dees-windowlayer>>
</div> </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-typelist.js';
export * from './dees-input-phone.js';
export * from './dees-progressbar.js';
export * from './dees-input-quantityselector.js';
export * from './dees-input-radio.js';
export * from './dees-input-text.js';