From f1a0c5741cbe1c8b33850316f4e70a7b388ce899 Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Thu, 12 Jan 2023 18:14:59 +0100 Subject: [PATCH] fix(core): update --- ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/dees-contextmenu.ts | 100 ++++++++++++++++++++++++++++ ts_web/elements/dees-icon.ts | 16 +++-- 3 files changed, 112 insertions(+), 6 deletions(-) create mode 100644 ts_web/elements/dees-contextmenu.ts diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 67dc5b7..7f116d5 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@designestate/dees-catalog', - version: '1.0.133', + version: '1.0.134', description: 'website for lossless.com' } diff --git a/ts_web/elements/dees-contextmenu.ts b/ts_web/elements/dees-contextmenu.ts new file mode 100644 index 0000000..de01784 --- /dev/null +++ b/ts_web/elements/dees-contextmenu.ts @@ -0,0 +1,100 @@ +import { + customElement, + html, + DeesElement, + property, + TemplateResult, + cssManager, + css, + unsafeCSS, +} from '@designestate/dees-element'; + +import * as domtools from '@designestate/dees-domtools'; + +declare global { + interface HTMLElementTagNameMap { + 'dees-contextmenu': DeesContextmenu; + } +} + +@customElement('dees-contextmenu') +export class DeesContextmenu extends DeesElement { + public static demo = () => html` + + + `; + + @property() + public selectionMode: 'single' | 'multiple' = 'single'; + + @property({ + type: Array, + }) + public selectableChips: string[] = []; + + @property() + public selectedChip: string = null; + + @property({ + type: Array, + }) + public selectedChips: string[] = []; + + constructor() { + super(); + } + + public static styles = [ + cssManager.defaultStyles, + css` + :host { + display: block; + box-sizing: border-box; + } + + .mainbox { + } + + + `, + ]; + + public render(): TemplateResult { + return html` +
+ +
+ `; + } + + public async firstUpdated() { + if (!this.textContent) { + this.textContent = 'Button'; + this.performUpdate(); + } + } + + 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); + } +} diff --git a/ts_web/elements/dees-icon.ts b/ts_web/elements/dees-icon.ts index 4a8941c..906f2d7 100644 --- a/ts_web/elements/dees-icon.ts +++ b/ts_web/elements/dees-icon.ts @@ -26,6 +26,7 @@ import { faSun as faSunRegular, } from '@fortawesome/free-regular-svg-icons'; import { + faArrowUpRightFromSquare as faArrowUpRightFromSquareSolid, faBell as faBellSolid, faBug as faBugSolid, faBuilding as faBuildingSolid, @@ -43,6 +44,8 @@ import { export const faIcons = { // normal + arrowUpRightFromSquare: faArrowUpRightFromSquareSolid, + arrowUpRightFromSquareSolid: faArrowUpRightFromSquareSolid, bell: faBellSolid, bellSolid: faBellSolid, bug: faBugSolid, @@ -90,14 +93,17 @@ export class DeesIcon extends DeesElement { public static demo = () => html`
- - - - + + + + +
`; - @property() + @property({ + type: String + }) public iconFA: keyof typeof faIcons; @property()