fix(core): update
This commit is contained in:
parent
310910e8ee
commit
2abd91ab4a
@ -23,7 +23,7 @@
|
|||||||
"@fortawesome/free-regular-svg-icons": "^6.2.1",
|
"@fortawesome/free-regular-svg-icons": "^6.2.1",
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
||||||
"@pushrocks/smartpromise": "^3.1.7",
|
"@pushrocks/smartpromise": "^3.1.7",
|
||||||
"@tsclass/tsclass": "^4.0.28",
|
"@tsclass/tsclass": "^4.0.29",
|
||||||
"pdfjs-dist": "^2.15.349"
|
"pdfjs-dist": "^2.15.349"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
579
pnpm-lock.yaml
579
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@designestate/dees-catalog',
|
name: '@designestate/dees-catalog',
|
||||||
version: '1.0.135',
|
version: '1.0.136',
|
||||||
description: 'website for lossless.com'
|
description: 'website for lossless.com'
|
||||||
}
|
}
|
||||||
|
@ -11,6 +11,7 @@ import {
|
|||||||
} from '@designestate/dees-element';
|
} from '@designestate/dees-element';
|
||||||
|
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
import { DeesWindowLayer } from './dees-windowlayer.js';
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
@ -20,24 +21,53 @@ declare global {
|
|||||||
|
|
||||||
@customElement('dees-contextmenu')
|
@customElement('dees-contextmenu')
|
||||||
export class DeesContextmenu extends DeesElement {
|
export class DeesContextmenu extends DeesElement {
|
||||||
|
// DEMO
|
||||||
public static demo = () => html`
|
public static demo = () => html`
|
||||||
<dees-button>Hello</dees-button>
|
<style>
|
||||||
<dees-contextmenu .menuItems=${[
|
.withMargin {
|
||||||
|
display: block;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<dees-button @click=${() => {
|
||||||
|
DeesContextmenu.openContextMenuWithOptions();
|
||||||
|
}}>Hello</dees-button>
|
||||||
|
<dees-contextmenu class="withMargin"></dees-contextmenu>
|
||||||
|
<dees-contextmenu
|
||||||
|
class="withMargin"
|
||||||
|
.menuItems=${[
|
||||||
{
|
{
|
||||||
name: 'copy',
|
name: 'copy',
|
||||||
action: async () => {}
|
iconName: 'copySolid',
|
||||||
|
action: async () => {},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'edit',
|
name: 'edit',
|
||||||
action: async () => {}
|
iconName: 'penToSquare',
|
||||||
}
|
action: async () => {},
|
||||||
] as plugins.tsclass.website.IMenuItem[]}></dees-contextmenu>
|
},{
|
||||||
|
name: 'paste',
|
||||||
|
iconName: 'pasteSolid',
|
||||||
|
action: async () => {},
|
||||||
|
},
|
||||||
|
] as plugins.tsclass.website.IMenuItem[]}
|
||||||
|
></dees-contextmenu>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@property({
|
// STATIC
|
||||||
|
public static openContextMenuWithOptions(eventArg, contextOptions: plugins.tsclass.website.IMenuItem[]) {
|
||||||
|
const contextMenu = new DeesContextmenu();
|
||||||
|
contextMenu.style.position = 'absolute';
|
||||||
|
contextMenu;
|
||||||
|
const windowLayer = new DeesWindowLayer();
|
||||||
|
windowLayer.append(contextMenu);
|
||||||
|
document.body.append(windowLayer);
|
||||||
|
}
|
||||||
|
|
||||||
|
@property({
|
||||||
type: Array,
|
type: Array,
|
||||||
})
|
})
|
||||||
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
|
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
@ -48,48 +78,62 @@ public menuItems: plugins.tsclass.website.IMenuItem[] = [];
|
|||||||
css`
|
css`
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainbox {
|
.mainbox {
|
||||||
|
color: ${cssManager.bdTheme('#222', '#ccc')};
|
||||||
|
font-size: 14px;
|
||||||
|
width: 200px;
|
||||||
|
border: 1px solid #444;
|
||||||
|
min-height: 40px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: #222;
|
||||||
|
box-shadow: 0px 1px 4px #000;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mainbox .menuitem {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainbox .menuitem dees-icon {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 14px;
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainbox .menuitem:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ffffff10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainbox .menuitem:active {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ffffff05;
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<div class="mainbox">
|
<div class="mainbox">
|
||||||
|
${this.menuItems.map((menuItemArg) => {
|
||||||
|
return html`
|
||||||
|
<div class="menuitem">
|
||||||
|
<dees-icon .iconFA=${(menuItemArg.iconName as any) || 'minus'}></dees-icon
|
||||||
|
>${menuItemArg.name}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
public async firstUpdated() {
|
public async firstUpdated() {
|
||||||
if (!this.textContent) {
|
if (!this.menuItems || this.menuItems.length === 0) {
|
||||||
this.textContent = 'Button';
|
const mainbox = this.shadowRoot.querySelector('.mainbox');
|
||||||
this.performUpdate();
|
mainbox.textContent = 'no menu items present';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public async selectChip(chipArg: string) {
|
|
||||||
if (this.selectionMode === 'single') {
|
|
||||||
if (this.selectedChip === chipArg) {
|
|
||||||
this.selectedChip = null;
|
|
||||||
this.selectedChips = [];
|
|
||||||
} else {
|
|
||||||
this.selectedChip = chipArg;
|
|
||||||
this.selectedChips = [chipArg];
|
|
||||||
}
|
|
||||||
} else if (this.selectionMode === 'multiple') {
|
|
||||||
if (this.selectedChips.includes(chipArg)) {
|
|
||||||
this.selectedChips = this.selectedChips.filter((chipArg2) => chipArg !== chipArg2);
|
|
||||||
} else {
|
|
||||||
this.selectedChips.push(chipArg);
|
|
||||||
}
|
|
||||||
this.requestUpdate();
|
|
||||||
}
|
|
||||||
console.log(this.selectedChips);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -22,19 +22,28 @@ import {
|
|||||||
} from '@fortawesome/free-brands-svg-icons';
|
} from '@fortawesome/free-brands-svg-icons';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
faCopy as faCopyRegular,
|
||||||
faMessage as faMessageRegular,
|
faMessage as faMessageRegular,
|
||||||
|
faPaste as faPasteRegular,
|
||||||
faSun as faSunRegular,
|
faSun as faSunRegular,
|
||||||
} from '@fortawesome/free-regular-svg-icons';
|
} from '@fortawesome/free-regular-svg-icons';
|
||||||
import {
|
import {
|
||||||
|
faArrowRight as faArrowRightSolid,
|
||||||
faArrowUpRightFromSquare as faArrowUpRightFromSquareSolid,
|
faArrowUpRightFromSquare as faArrowUpRightFromSquareSolid,
|
||||||
faBell as faBellSolid,
|
faBell as faBellSolid,
|
||||||
faBug as faBugSolid,
|
faBug as faBugSolid,
|
||||||
faBuilding as faBuildingSolid,
|
faBuilding as faBuildingSolid,
|
||||||
faCaretLeft as faCaretLeftSolid,
|
faCaretLeft as faCaretLeftSolid,
|
||||||
|
faCaretRight as faCaretRightSolid,
|
||||||
|
faCheck as faCheckSolid,
|
||||||
faCircleInfo as faCircleInfoSolid,
|
faCircleInfo as faCircleInfoSolid,
|
||||||
|
faCopy as faCopySolid,
|
||||||
faDesktop as faDesktopSolid,
|
faDesktop as faDesktopSolid,
|
||||||
faGrip as faGripSolid,
|
faGrip as faGripSolid,
|
||||||
faMessage as faMessageSolid,
|
faMessage as faMessageSolid,
|
||||||
|
faMinus as faMinusSolid,
|
||||||
|
faPaste as faPasteSolid,
|
||||||
|
faPenToSquare as faPenToSquareSolid,
|
||||||
faRss as faRssSolid,
|
faRss as faRssSolid,
|
||||||
faUsers as faUsersSolid,
|
faUsers as faUsersSolid,
|
||||||
faShare as faShareSolid,
|
faShare as faShareSolid,
|
||||||
@ -44,6 +53,7 @@ import {
|
|||||||
|
|
||||||
export const faIcons = {
|
export const faIcons = {
|
||||||
// normal
|
// normal
|
||||||
|
arrowRight: faArrowRightSolid,
|
||||||
arrowUpRightFromSquare: faArrowUpRightFromSquareSolid,
|
arrowUpRightFromSquare: faArrowUpRightFromSquareSolid,
|
||||||
arrowUpRightFromSquareSolid: faArrowUpRightFromSquareSolid,
|
arrowUpRightFromSquareSolid: faArrowUpRightFromSquareSolid,
|
||||||
bell: faBellSolid,
|
bell: faBellSolid,
|
||||||
@ -54,14 +64,26 @@ export const faIcons = {
|
|||||||
buildingSolid: faBuildingSolid,
|
buildingSolid: faBuildingSolid,
|
||||||
caretLeft: faCaretLeftSolid,
|
caretLeft: faCaretLeftSolid,
|
||||||
caretLeftSolid: faCaretLeftSolid,
|
caretLeftSolid: faCaretLeftSolid,
|
||||||
|
caretRight: faCaretRightSolid,
|
||||||
|
caretRightSolid: faCaretRightSolid,
|
||||||
|
check: faCheckSolid,
|
||||||
|
checkSolid: faCheckSolid,
|
||||||
circleinfo: faCircleInfoSolid,
|
circleinfo: faCircleInfoSolid,
|
||||||
circleinfoSolid: faCircleInfoSolid,
|
circleinfoSolid: faCircleInfoSolid,
|
||||||
|
copy: faCopyRegular,
|
||||||
|
copySolid: faCopySolid,
|
||||||
desktop: faDesktopSolid,
|
desktop: faDesktopSolid,
|
||||||
desktopSolid: faDesktopSolid,
|
desktopSolid: faDesktopSolid,
|
||||||
grip: faGripSolid,
|
grip: faGripSolid,
|
||||||
gripSolid: faGripSolid,
|
gripSolid: faGripSolid,
|
||||||
message: faMessageRegular,
|
message: faMessageRegular,
|
||||||
messageSolid: faMessageSolid,
|
messageSolid: faMessageSolid,
|
||||||
|
minus: faMinusSolid,
|
||||||
|
minusSolid: faMinusSolid,
|
||||||
|
paste: faPasteRegular,
|
||||||
|
pasteSolid: faPasteSolid,
|
||||||
|
penToSquare: faPenToSquareSolid,
|
||||||
|
penToSquareSolid: faPenToSquareSolid,
|
||||||
rss: faRssSolid,
|
rss: faRssSolid,
|
||||||
rssSolid: faRssSolid,
|
rssSolid: faRssSolid,
|
||||||
share: faShareSolid,
|
share: faShareSolid,
|
||||||
|
@ -23,6 +23,8 @@ export class DeesSpinner extends DeesElement {
|
|||||||
<dees-spinner></dees-spinner>
|
<dees-spinner></dees-spinner>
|
||||||
<dees-spinner status="success"></dees-spinner>
|
<dees-spinner status="success"></dees-spinner>
|
||||||
<dees-spinner status="error"></dees-spinner>
|
<dees-spinner status="error"></dees-spinner>
|
||||||
|
<dees-spinner size=${64} status="success"></dees-spinner>
|
||||||
|
<dees-spinner .size=${64} status="error"></dees-spinner>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@property({
|
@property({
|
||||||
@ -45,6 +47,7 @@ export class DeesSpinner extends DeesElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#loading {
|
#loading {
|
||||||
|
position: relative;
|
||||||
transition: none;
|
transition: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -84,36 +87,11 @@ export class DeesSpinner extends DeesElement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#loading .checkmark {
|
dees-icon {
|
||||||
display: inline-block;
|
color: #fff;
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
-ms-transform: rotate(45deg); /* IE 9 */
|
|
||||||
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#loading .checkmark_stem {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 3px;
|
height: 100%;
|
||||||
height: 9px;
|
width: 100%;
|
||||||
background-color: #fff;
|
|
||||||
left: 9px;
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loading .checkmark_kick {
|
|
||||||
position: absolute;
|
|
||||||
width: 3px;
|
|
||||||
height: 3px;
|
|
||||||
background-color: #fff;
|
|
||||||
left: 6px;
|
|
||||||
top: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loading.disabled .checkmark_stem,
|
|
||||||
#loading.disabled .checkmark_kick {
|
|
||||||
background-color: ${cssManager.bdTheme('#333', '#fff')};
|
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
@ -125,16 +103,18 @@ export class DeesSpinner extends DeesElement {
|
|||||||
width: ${this.size}px;
|
width: ${this.size}px;
|
||||||
height: ${this.size}px;
|
height: ${this.size}px;
|
||||||
}
|
}
|
||||||
|
dees-icon {
|
||||||
|
font-size: ${Math.round(this.size * 0.6)}px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="${this.status}" id="loading">
|
<div class="${this.status}" id="loading">
|
||||||
${this.status === 'success' || this.status === 'error'
|
${(() => {
|
||||||
? html`
|
if (this.status === 'success') {
|
||||||
<span class="checkmark">
|
return html`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${'check' as any}></dees-icon>`;
|
||||||
<div class="checkmark_stem"></div>
|
} else if (this.status === 'error') {
|
||||||
<div class="checkmark_kick"></div>
|
return html`<dees-icon .iconFA=${'xmark' as any}></dees-icon>`;
|
||||||
</span>
|
}
|
||||||
`
|
})()}
|
||||||
: null}
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user