fix(core): update

This commit is contained in:
Philipp Kunz 2023-09-07 18:34:38 +02:00
parent 67065b1ffb
commit 00ac83f205
6 changed files with 123 additions and 62 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.186', version: '1.0.187',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -0,0 +1,18 @@
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html` <style>
.demoWrapper {
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
background: none;
}
</style>
<div class="demoWrapper">
<dees-dataview-codebox proglang="typescript">
import * as text from './hello'; const hiThere = 'nice'; const myFunction = async () => {
console.log('nice one'); }
</dees-dataview-codebox>
</div>`

View File

@ -1,3 +1,4 @@
import { demoFunc } from './dees-dataview-codebox.demo.js';
import { import {
DeesElement, DeesElement,
html, html,
@ -21,10 +22,7 @@ declare global {
@customElement('dees-dataview-codebox') @customElement('dees-dataview-codebox')
export class DeesDataviewCodebox extends DeesElement { export class DeesDataviewCodebox extends DeesElement {
public static demo = () => html`<dees-dataview-codebox proglang="typescript"> public static demo = demoFunc;
import * as text from './hello'; const hiThere = 'nice'; const myFunction = async () => {
console.log('nice one'); }
</dees-dataview-codebox>`;
@property() @property()
public progLang: string = 'typescript'; public progLang: string = 'typescript';
@ -52,19 +50,48 @@ export class DeesDataviewCodebox extends DeesElement {
.mainbox { .mainbox {
position: relative; position: relative;
color: ${this.goBright ? '#333333' : '#ffffff'}; color: ${this.goBright ? '#333333' : '#ffffff'};
border-top: 1px solid ${this.goBright ? '#ffffff' : '#333333'};
box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.5)'};
background: ${this.goBright ? '#ffffff' : '#191919'};
border-radius: 16px;
overflow: hidden;
}
.appbar {
height: 24px;
background: #161616;
border-bottom: 1px solid #222222;
font-size: 12px;
color: #CCC;
font-family: 'Hubot Sans', 'monospace';
line-height: 24px;
}
.appbar .fileName {
text-align: center;
}
.bottomBar {
height: 24px;
background: #161616;
border-top: 1px solid #222222;
font-size: 12px;
color: #CCC;
font-family: 'Hubot Sans', 'monospace';
line-height: 24px;
} }
.languageLabel { .languageLabel {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
line-height: 24px;
z-index: 10; z-index: 10;
background: #6596ff; background: #6596ff20;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
right: 32px; bottom: 0px;
padding: 4px; right: 0px;
border-bottom-left-radius: 3px; padding: 0px 16px 0px 8px;
border-bottom-right-radius: 3px;
} }
.hljs-keyword { .hljs-keyword {
@ -74,18 +101,15 @@ export class DeesDataviewCodebox extends DeesElement {
.codegrid { .codegrid {
display: grid; display: grid;
grid-template-columns: 50px auto; grid-template-columns: 50px auto;
background: ${this.goBright ? '#ffffff' : '#191919'};
border-top: 1px solid ${this.goBright ? '#ffffff' : '#333333'};
box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.5)'};
border-radius: 3px;
overflow: hidden; overflow: hidden;
} }
.lineNumbers { .lineNumbers {
background: ${this.goBright ? '#fafafa' : '#151515'};
color: ${this.goBright ? '#acacac' : '#666666'}; color: ${this.goBright ? '#acacac' : '#666666'};
padding: 30px 16px 0px 0px; padding: 30px 16px 0px 0px;
text-align: right; text-align: right;
border-right: 1px solid ${this.goBright ? '#eaeaea' : '#222222'};
} }
.lineCounter:last-child { .lineCounter:last-child {
@ -121,31 +145,37 @@ export class DeesDataviewCodebox extends DeesElement {
} }
.hljs-function { .hljs-function {
color: ${this.goBright ? '#2765DF': '#6596ff' }; color: ${this.goBright ? '#2765DF' : '#6596ff'};
} }
.hljs-params { .hljs-params {
color: ${this.goBright ? '#3DB420' : '#65d5ff' }; color: ${this.goBright ? '#3DB420' : '#65d5ff'};
} }
.hljs-comment { .hljs-comment {
color: ${this.goBright ? '#EF9300' : '#ffd765' }; color: ${this.goBright ? '#EF9300' : '#ffd765'};
} }
</style> </style>
<div class="mainbox"> <div class="mainbox">
<div class="languageLabel">${this.progLang}</div> <div class="appbar">
<div class="fileName">index.ts</div>
</div>
<div class="codegrid"> <div class="codegrid">
<div class="lineNumbers"> <div class="lineNumbers">
${(() => { ${(() => {
let lineCounter = 0; let lineCounter = 0;
return this.codeToDisplay.split('\n').map(lineArg => { return this.codeToDisplay.split('\n').map((lineArg) => {
lineCounter++; lineCounter++;
return html`<div class="lineCounter">${lineCounter}</div>`; return html`<div class="lineCounter">${lineCounter}</div>`;
}) });
})()} })()}
</div> </div>
<pre><code></code></pre> <pre><code></code></pre>
</div> </div>
<div class="bottomBar">
Spaces: 2
<div class="languageLabel">${this.progLang}</div>
</div>
</div> </div>
`; `;
} }
@ -167,12 +197,17 @@ export class DeesDataviewCodebox extends DeesElement {
this.codeToDisplayStore = smartstring.indent.normalize(this.codeToDisplay).trimStart(); this.codeToDisplayStore = smartstring.indent.normalize(this.codeToDisplay).trimStart();
} }
if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText && !this.codeToDisplay) { if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText && !this.codeToDisplay) {
this.codeToDisplayStore = smartstring.indent.normalize(slottedCodeNodes[0].wholeText).trimStart(); this.codeToDisplayStore = smartstring.indent
.normalize(slottedCodeNodes[0].wholeText)
.trimStart();
this.codeToDisplay = this.codeToDisplayStore; this.codeToDisplay = this.codeToDisplayStore;
} }
await domtools.plugins.smartdelay.delayFor(0); await domtools.plugins.smartdelay.delayFor(0);
const localCodeNode = this.shadowRoot.querySelector('code'); const localCodeNode = this.shadowRoot.querySelector('code');
const html = hlight.highlight(this.codeToDisplayStore, {language: this.progLang, ignoreIllegals: true}); const html = hlight.highlight(this.codeToDisplayStore, {
language: this.progLang,
ignoreIllegals: true,
});
localCodeNode.innerHTML = html.value; localCodeNode.innerHTML = html.value;
} }
} }

View File

@ -0,0 +1,39 @@
import { html } from '@design.estate/dees-element';
import * as tsclass from '@tsclass/tsclass';
export const demoFunc = () => html`<dees-dataview-statusobject
.statusObject=${{
id: '1',
name: 'Demo Item',
combinedStatus: 'partly_ok',
combinedStatusText: 'partly_ok',
details: [
{
name: 'Detail 1',
value: 'Value 1',
status: 'ok',
statusText: 'OK',
},
{
name: 'Detail 2',
value: 'Value 2',
status: 'partly_ok',
statusText: 'partly_ok',
},
{
name: 'Detail 3',
value: 'Value 3',
status: 'not_ok',
statusText: 'not_ok',
},
{
name: 'Detail 4',
value:
'Value 4 jhdkfjhalskdfjhfdjskalsdkfjhfdjskalskdjfhjdkslaksjdhfjdkslaskdfjhfjdkslaskdjfhjdskalskdjhfdjskalskdjfhdjskl',
status: 'ok',
statusText: 'OK',
},
],
} as tsclass.code.IStatusObject}
>
</dees-dataview-statusobject>`;

View File

@ -1,3 +1,4 @@
import { demoFunc } from './dees-dataview-statusobject.demo.js';
import { import {
DeesElement, DeesElement,
html, html,
@ -20,41 +21,7 @@ declare global {
@customElement('dees-dataview-statusobject') @customElement('dees-dataview-statusobject')
export class DeesDataviewStatusobject extends DeesElement { export class DeesDataviewStatusobject extends DeesElement {
public static demo = () => html`<dees-dataview-statusobject public static demo = demoFunc;
.statusObject=${{
id: '1',
name: 'Demo Item',
combinedStatus: 'partly_ok',
combinedStatusText: 'partly_ok',
details: [
{
name: 'Detail 1',
value: 'Value 1',
status: 'ok',
statusText: 'OK',
},
{
name: 'Detail 2',
value: 'Value 2',
status: 'partly_ok',
statusText: 'partly_ok',
},
{
name: 'Detail 3',
value: 'Value 3',
status: 'not_ok',
statusText: 'not_ok',
},
{
name: 'Detail 4',
value: 'Value 4 jhdkfjhalskdfjhfdjskalsdkfjhfdjskalskdjfhjdkslaksjdhfjdkslaskdfjhfjdkslaskdjfhjdskalskdjhfdjskalskdjfhdjskl',
status: 'ok',
statusText: 'OK',
},
],
}}
>
</dees-dataview-statusobject>`;
@property({ type: Object }) statusObject: tsclass.code.IStatusObject; @property({ type: Object }) statusObject: tsclass.code.IStatusObject;
@ -95,7 +62,7 @@ export class DeesDataviewStatusobject extends DeesElement {
.copyMain { .copyMain {
cursor: pointer; cursor: pointer;
font-size: 8px; font-size: 10px;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
border: 1px solid ${cssManager.bdTheme('#999', '#444')}; border: 1px solid ${cssManager.bdTheme('#999', '#444')};
@ -103,6 +70,7 @@ export class DeesDataviewStatusobject extends DeesElement {
padding: 4px; padding: 4px;
border-radius: 3px; border-radius: 3px;
margin-right: 16px; margin-right: 16px;
color: #ffffff80
} }
.statusdot.ok { .statusdot.ok {
@ -122,7 +90,7 @@ export class DeesDataviewStatusobject extends DeesElement {
align-items: center; align-items: center;
display: grid; display: grid;
grid-template-columns: 40px auto; grid-template-columns: 40px auto;
border-top: 1px dotted ${cssManager.bdTheme('#999', '#444')}; border-top: 1px dotted ${cssManager.bdTheme('#999', '#282828')};
} }
.detail .detailsText { .detail .detailsText {
@ -134,10 +102,11 @@ export class DeesDataviewStatusobject extends DeesElement {
.detail .detailsText .label { .detail .detailsText .label {
font-size: 12px; font-size: 12px;
color: #ffffff80
} }
.detail .detailsText .value { .detail .detailsText .value {
font-size: 16px; font-size: 14px;
font-family: 'Intel One Mono'; font-family: 'Intel One Mono';
} }
`, `,

View File

@ -62,7 +62,7 @@ export class DeesTable<T> extends DeesElement {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 60px; padding: 20px;
background: #000000; background: #000000;
} }
</style> </style>