fix(core): update
This commit is contained in:
parent
ab0219d3e4
commit
37524765ae
20
package.json
20
package.json
@ -16,24 +16,26 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@designestate/dees-domtools": "^2.0.28",
|
||||
"@designestate/dees-element": "^2.0.19",
|
||||
"@designestate/dees-element": "^2.0.20",
|
||||
"@designestate/dees-wcctools": "^1.0.76",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.3.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.3.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.3.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.3.0",
|
||||
"@pushrocks/smartpromise": "^3.1.7",
|
||||
"@tsclass/tsclass": "^4.0.34",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.4.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.4.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
||||
"@pushrocks/smartpromise": "^4.0.0",
|
||||
"@pushrocks/smartstring": "^4.0.5",
|
||||
"@tsclass/tsclass": "^4.0.36",
|
||||
"highlight.js": "11.7.0",
|
||||
"pdfjs-dist": "^2.15.349"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.65",
|
||||
"@gitzone/tsbundle": "^2.0.7",
|
||||
"@gitzone/tstest": "^1.0.74",
|
||||
"@gitzone/tswatch": "^2.0.5",
|
||||
"@gitzone/tswatch": "^2.0.7",
|
||||
"@pushrocks/projectinfo": "^5.0.1",
|
||||
"@pushrocks/tapbundle": "^5.0.4",
|
||||
"@types/node": "^18.15.9"
|
||||
"@types/node": "^18.15.11"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
|
||||
1811
pnpm-lock.yaml
generated
1811
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@designestate/dees-catalog',
|
||||
version: '1.0.155',
|
||||
version: '1.0.156',
|
||||
description: 'website for lossless.com'
|
||||
}
|
||||
|
||||
169
ts_web/elements/dees-dataview-codebox.ts
Normal file
169
ts_web/elements/dees-dataview-codebox.ts
Normal file
@ -0,0 +1,169 @@
|
||||
import {
|
||||
DeesElement,
|
||||
html,
|
||||
customElement,
|
||||
TemplateResult,
|
||||
property,
|
||||
state,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import hlight from 'highlight.js';
|
||||
|
||||
import * as smartstring from '@pushrocks/smartstring';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-dataview-codebox': DeesDataviewCodebox;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-dataview-codebox')
|
||||
export class DeesDataviewCodebox extends DeesElement {
|
||||
public static demo = () => html`<dees-dataview-codebox proglang="typescript">
|
||||
import * as text from './hello'; const hiThere = 'nice'; const myFunction = async () => {
|
||||
console.log('nice one'); }
|
||||
</dees-dataview-codebox>`;
|
||||
|
||||
@property()
|
||||
public progLang: string = 'typescript';
|
||||
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public codeToDisplay: string = '// no code set';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
.mainbox {
|
||||
position: relative;
|
||||
color: ${this.goBright ? '#333333' : '#ffffff'};
|
||||
}
|
||||
|
||||
.languageLabel {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
z-index: 10;
|
||||
background: #6596ff;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
padding: 4px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.hljs-keyword {
|
||||
color: #ff65ec;
|
||||
}
|
||||
|
||||
.codegrid {
|
||||
display: grid;
|
||||
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;
|
||||
}
|
||||
|
||||
.lineNumbers {
|
||||
background: ${this.goBright ? '#fafafa' : '#151515'};
|
||||
color: ${this.goBright ? '#acacac' : '#666666'};
|
||||
padding: 30px 16px 0px 0px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.lineCounter:last-child {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
margin: 0px;
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-weight: ${this.goBright ? '400' : '300'};
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
code,
|
||||
code *,
|
||||
.lineNumbers {
|
||||
line-height: 1.4em;
|
||||
font-weight: 200;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.hljs-string {
|
||||
color: #ffa465;
|
||||
}
|
||||
|
||||
.hljs-built_in {
|
||||
color: #65ff6a;
|
||||
}
|
||||
|
||||
.hljs-function {
|
||||
color: ${this.goBright ? '#2765DF': '#6596ff' };
|
||||
}
|
||||
|
||||
.hljs-params {
|
||||
color: ${this.goBright ? '#3DB420' : '#65d5ff' };
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
color: ${this.goBright ? '#EF9300' : '#ffd765' };
|
||||
}
|
||||
</style>
|
||||
<div class="mainbox">
|
||||
<div class="languageLabel">${this.progLang}</div>
|
||||
<div class="codegrid">
|
||||
<div class="lineNumbers">
|
||||
${(() => {
|
||||
let lineCounter = 0;
|
||||
return this.codeToDisplay.split('\n').map(lineArg => {
|
||||
lineCounter++;
|
||||
return html`<div class="lineCounter">${lineCounter}</div>`;
|
||||
})
|
||||
})()}
|
||||
</div>
|
||||
<pre><code class="${this.progLang}">${this.codeToDisplay}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async updated(_changedProperties) {
|
||||
super.updated(_changedProperties);
|
||||
console.log('highlighting now');
|
||||
console.log(this.childNodes);
|
||||
const slottedCodeNodes: Text[] = [];
|
||||
this.childNodes.forEach((childNode) => {
|
||||
if (childNode.nodeName === '#text') {
|
||||
slottedCodeNodes.push(childNode as Text);
|
||||
}
|
||||
});
|
||||
if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText) {
|
||||
this.codeToDisplay = smartstring.indent.normalize(slottedCodeNodes[0].wholeText);
|
||||
}
|
||||
await domtools.plugins.smartdelay.delayFor(0);
|
||||
const localCodeNode = this.shadowRoot.querySelector('code');
|
||||
hlight.highlightBlock(localCodeNode);
|
||||
}
|
||||
}
|
||||
168
ts_web/elements/dees-dataview-statusobject.ts
Normal file
168
ts_web/elements/dees-dataview-statusobject.ts
Normal file
@ -0,0 +1,168 @@
|
||||
import {
|
||||
DeesElement,
|
||||
html,
|
||||
customElement,
|
||||
TemplateResult,
|
||||
property,
|
||||
state,
|
||||
cssManager,
|
||||
css,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
|
||||
import hlight from 'highlight.js';
|
||||
|
||||
import * as smartstring from '@pushrocks/smartstring';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-dataview-statusobject': DeesDataviewStatusobject;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-dataview-statusobject')
|
||||
export class DeesDataviewStatusobject extends DeesElement {
|
||||
public static demo = () => 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',
|
||||
status: 'ok',
|
||||
statusText: 'OK',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
</dees-dataview-statusobject>`;
|
||||
|
||||
@property({ type: Object }) statusObject: tsclass.code.IStatusObject;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
.mainbox {
|
||||
max-width: 600px;
|
||||
border-radius: 3px;
|
||||
background: #1b1b1b;
|
||||
min-height: 48px;
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 40px auto 120px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
height: 48px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.statusdot {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: 6px;
|
||||
background: grey;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.copyMain {
|
||||
cursor: pointer;
|
||||
font-size: 8px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid ${cssManager.bdTheme('#999', '#444')};
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.statusdot.ok {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.statusdot.not_ok{
|
||||
background: red;
|
||||
}
|
||||
|
||||
.statusdot.partly_ok {
|
||||
background: orange;
|
||||
}
|
||||
|
||||
.detail {
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: 40px auto;
|
||||
border-top: 1px dotted ${cssManager.bdTheme('#999', '#444')};
|
||||
}
|
||||
|
||||
.detail .detailsText .label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail .detailsText .value {
|
||||
font-size: 16px;
|
||||
font-family: Roboto Mono;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`
|
||||
<div class="mainbox">
|
||||
<div class="heading">
|
||||
<div class="statusdot ${this.statusObject.combinedStatus}"></div>
|
||||
<h1>${this.statusObject?.name || 'no status object assigned'}</h1>
|
||||
<div class="copyMain">Copy as JSON</div>
|
||||
</div>
|
||||
${this.statusObject.details.map((detailArg) => {
|
||||
return html`
|
||||
<div class="detail">
|
||||
<div class="statusdot ${detailArg.status}"></div>
|
||||
<div class="detailsText">
|
||||
<div class="label">${detailArg.name}</div>
|
||||
<div class="value">${detailArg.value}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async firstUpdated() {}
|
||||
}
|
||||
@ -2,6 +2,8 @@ export * from './dees-button-exit.js';
|
||||
export * from './dees-button.js';
|
||||
export * from './dees-chips.js';
|
||||
export * from './dees-contextmenu.js';
|
||||
export * from './dees-dataview-codebox.js';
|
||||
export * from './dees-dataview-statusobject.js';
|
||||
export * from './dees-form.js';
|
||||
export * from './dees-form-submit.js';
|
||||
export * from './dees-icon.js';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user