fix(core): update

This commit is contained in:
Philipp Kunz 2023-09-09 13:34:46 +02:00
parent bcfd3495dd
commit 69e17949f4
8 changed files with 156 additions and 63 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.188', version: '1.0.189',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -0,0 +1,57 @@
import { html } from '@design.estate/dees-element';
import * as plugins from './plugins.js';
import { DeesContextmenu } from './dees-contextmenu.js';
export const demoFunc = () => html`
<style>
.withMargin {
display: block;
margin: 20px;
}
</style>
<dees-button @contextmenu=${(eventArg) => {
DeesContextmenu.openContextMenuWithOptions(eventArg, [
{
name: 'copy',
iconName: 'copySolid',
action: async () => {
return null;
},
},
{
name: 'edit',
iconName: 'penToSquare',
action: async () => {
return null;
},
},{
name: 'paste',
iconName: 'pasteSolid',
action: async () => {
return null;
},
},
]);
}}>Hello</dees-button>
<dees-contextmenu class="withMargin"></dees-contextmenu>
<dees-contextmenu
class="withMargin"
.menuItems=${[
{
name: 'copy',
iconName: 'copySolid',
action: async () => {},
},
{
name: 'edit',
iconName: 'penToSquare',
action: async () => {},
},{
name: 'paste',
iconName: 'pasteSolid',
action: async () => {},
},
] as plugins.tsclass.website.IMenuItem[]}
></dees-contextmenu>
`;

View File

@ -1,3 +1,4 @@
import { demoFunc } from './dees-contextmenu.demo.js';
import * as plugins from './plugins.js'; import * as plugins from './plugins.js';
import { import {
customElement, customElement,
@ -23,58 +24,7 @@ declare global {
@customElement('dees-contextmenu') @customElement('dees-contextmenu')
export class DeesContextmenu extends DeesElement { export class DeesContextmenu extends DeesElement {
// DEMO // DEMO
public static demo = () => html` public static demo = demoFunc
<style>
.withMargin {
display: block;
margin: 20px;
}
</style>
<dees-button @contextmenu=${(eventArg) => {
DeesContextmenu.openContextMenuWithOptions(eventArg, [
{
name: 'copy',
iconName: 'copySolid',
action: async () => {
return null;
},
},
{
name: 'edit',
iconName: 'penToSquare',
action: async () => {
return null;
},
},{
name: 'paste',
iconName: 'pasteSolid',
action: async () => {
return null;
},
},
]);
}}>Hello</dees-button>
<dees-contextmenu class="withMargin"></dees-contextmenu>
<dees-contextmenu
class="withMargin"
.menuItems=${[
{
name: 'copy',
iconName: 'copySolid',
action: async () => {},
},
{
name: 'edit',
iconName: 'penToSquare',
action: async () => {},
},{
name: 'paste',
iconName: 'pasteSolid',
action: async () => {},
},
] as plugins.tsclass.website.IMenuItem[]}
></dees-contextmenu>
`;
// STATIC // STATIC
public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) { public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
@ -122,7 +72,7 @@ export class DeesContextmenu extends DeesElement {
font-size: 14px; font-size: 14px;
width: 200px; width: 200px;
border: 1px solid #444; border: 1px solid #444;
min-height: 40px; min-height: 34px;
border-radius: 3px; border-radius: 3px;
background: #222; background: #222;
box-shadow: 0px 1px 4px #000; box-shadow: 0px 1px 4px #000;
@ -163,15 +113,20 @@ export class DeesContextmenu extends DeesElement {
</div> </div>
`; `;
})} })}
${this.menuItems.length === 0 ? html`
<div class="menuitem" @click=${() => {
alert('No menu items...')
}}>
<dees-icon .iconFA=${'xmark'}></dees-icon
>No menu item present...
</div>
` : html``}
</div> </div>
`; `;
} }
public async firstUpdated() { public async firstUpdated() {
if (!this.menuItems || this.menuItems.length === 0) {
const mainbox = this.shadowRoot.querySelector('.mainbox');
mainbox.textContent = 'no menu items present';
}
} }
public async handleClick(menuItem: plugins.tsclass.website.IMenuItem) { public async handleClick(menuItem: plugins.tsclass.website.IMenuItem) {

View File

@ -0,0 +1,5 @@
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html`
<dees-simple-appdash>Hello there</dees-simple-appdash>
`;

View File

@ -0,0 +1,74 @@
import { demoFunc } from './dees-simple-appdash.demo.js';
import {
customElement,
html,
DeesElement,
property,
type TemplateResult,
cssManager,
css,
unsafeCSS,
type CSSResult,
state,
} from '@design.estate/dees-element';
declare global {
interface HTMLElementTagNameMap {
'dees-simple-appdash': DeesSimpleAppDash;
}
}
@customElement('dees-simple-appdash')
export class DeesSimpleAppDash extends DeesElement {
// STATIC
public static demo = demoFunc;
// INSTANCE
@property()
public title = 'Dees Simple Login';
public static styles = [
cssManager.defaultStyles,
css`
:host {
color: ${cssManager.bdTheme('#333', '#fff')};
user-select: none;
}
.appbar {
position: absolute;
top: 0;
height: 40px;
width: 100%;
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#333')};
font-size: 14px;
line-height: 40px;
font-family: 'Hubot Sans', 'Inter', sans-serif;
padding: 0px 16px;
}
.appcontent {
position: absolute;
top: 40px;
bottom: 0;
width: 100%;
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
}
`,
];
public render(): TemplateResult {
return html`
<div class="appbar">
configvault v1.2.3
</div>
<div class="appcontent">
<slot></slot>
</div>
`;
}
public async firstUpdated(_changedProperties): Promise<void> {
const domtools = await this.domtoolsPromise;
super.firstUpdated(_changedProperties);
}
}

View File

@ -0,0 +1,3 @@
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html` <dees-simple-login> Hello there </dees-simple-login> `;

View File

@ -1,3 +1,5 @@
import { demoFunc } from './dees-simple-login.demo.js';
import { import {
customElement, customElement,
html, html,
@ -20,11 +22,7 @@ declare global {
@customElement('dees-simple-login') @customElement('dees-simple-login')
export class DeesSimpleLogin extends DeesElement { export class DeesSimpleLogin extends DeesElement {
// STATIC // STATIC
public static demo = () => html` public static demo = demoFunc
<dees-simple-login>
Hello there
</dees-simple-login>
`;
// INSTANCE // INSTANCE
@property() @property()

View File

@ -15,6 +15,7 @@ export * from './dees-input-radio.js';
export * from './dees-input-text.js'; export * from './dees-input-text.js';
export * from './dees-mobilenavigation.js'; export * from './dees-mobilenavigation.js';
export * from './dees-pdf.js'; export * from './dees-pdf.js';
export * from './dees-simple-appdash.js';
export * from './dees-simple-login.js'; export * from './dees-simple-login.js';
export * from './dees-speechbubble.js'; export * from './dees-speechbubble.js';
export * from './dees-spinner.js'; export * from './dees-spinner.js';