fix(core): update
This commit is contained in:
parent
bcfd3495dd
commit
69e17949f4
@ -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'
|
||||||
}
|
}
|
||||||
|
57
ts_web/elements/dees-contextmenu.demo.ts
Normal file
57
ts_web/elements/dees-contextmenu.demo.ts
Normal 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>
|
||||||
|
`;
|
@ -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) {
|
||||||
|
5
ts_web/elements/dees-simple-appdash.demo.ts
Normal file
5
ts_web/elements/dees-simple-appdash.demo.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { html } from '@design.estate/dees-element';
|
||||||
|
|
||||||
|
export const demoFunc = () => html`
|
||||||
|
<dees-simple-appdash>Hello there</dees-simple-appdash>
|
||||||
|
`;
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
3
ts_web/elements/dees-simple-login.demo.ts
Normal file
3
ts_web/elements/dees-simple-login.demo.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { html } from '@design.estate/dees-element';
|
||||||
|
|
||||||
|
export const demoFunc = () => html` <dees-simple-login> Hello there </dees-simple-login> `;
|
@ -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()
|
||||||
|
@ -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';
|
||||||
|
Loading…
Reference in New Issue
Block a user