fix(core): update

This commit is contained in:
Philipp Kunz 2023-10-31 13:44:18 +01:00
parent 844cc30551
commit 8e0062fdd5
3 changed files with 65 additions and 19 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.229', version: '1.0.230',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -22,6 +22,7 @@ export const demoFunc = () => html`
></dees-chips> ></dees-chips>
<dees-chips <dees-chips
selectionMode="single" selectionMode="single"
chipsAreRemovable
.selectableChips=${[ .selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' }, { key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' }, { key: 'account2', value: 'PaymentAccount2' },

View File

@ -19,7 +19,7 @@ declare global {
} }
} }
type Tag = { key: string, value: string }; type Tag = { key: string; value: string };
@customElement('dees-chips') @customElement('dees-chips')
export class DeesChips extends DeesElement { export class DeesChips extends DeesElement {
@ -29,7 +29,12 @@ export class DeesChips extends DeesElement {
public selectionMode: 'none' | 'single' | 'multiple' = 'single'; public selectionMode: 'none' | 'single' | 'multiple' = 'single';
@property({ @property({
type: Array type: Boolean,
})
public chipsAreRemovable: boolean = false;
@property({
type: Array,
}) })
public selectableChips: Tag[] = []; public selectableChips: Tag[] = [];
@ -37,10 +42,9 @@ export class DeesChips extends DeesElement {
public selectedChip: Tag = null; public selectedChip: Tag = null;
@property({ @property({
type: Array type: Array,
}) })
public selectedChips: Tag[] = []; public selectedChips: Tag[] = [];
constructor() { constructor() {
super(); super();
@ -49,7 +53,6 @@ export class DeesChips extends DeesElement {
public static styles = [ public static styles = [
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
:host { :host {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
@ -73,20 +76,20 @@ export class DeesChips extends DeesElement {
margin-bottom: 4px; margin-bottom: 4px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
} }
.chip:hover { .chip:hover {
background: #666666; background: #666666;
cursor: pointer; cursor: pointer;
} }
.chip.selected { .chip.selected {
background: #00A3FF; background: #00a3ff;
} }
.chipKey { .chipKey {
background: rgba(0,0,0,0.3); background: rgba(0, 0, 0, 0.3);
height: 100%; height: 100%;
display: inline-block; display: inline-block;
margin-left: -8px; margin-left: -8px;
@ -94,18 +97,44 @@ export class DeesChips extends DeesElement {
padding-right: 8px; padding-right: 8px;
margin-right: 8px; margin-right: 8px;
} }
dees-icon {
padding: 0px 6px 0px 4px;
margin-left: 4px;
margin-right: -8px;
background: rgba(0, 0, 0, 0.3);
}
dees-icon:hover {
background: #e4002b;
}
`, `,
]; ];
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<div class="mainbox"> <div class="mainbox">
${this.selectableChips.map(chip => html` ${this.selectableChips.map(
<div @click=${() => this.selectChip(chip)} class="chip ${this.isSelected(chip) ? 'selected' : ''}"> (chip) => html`
${chip.key ? html`<div class="chipKey">${chip.key}</div>` : html``}${chip.value} <div
</div> @click=${() => this.selectChip(chip)}
`)} class="chip ${this.isSelected(chip) ? 'selected' : ''}"
>
${chip.key ? html`<div class="chipKey">${chip.key}</div>` : html``} ${chip.value}
${this.chipsAreRemovable
? html`
<dees-icon
@click=${(event: Event) => {
event.stopPropagation(); // prevent the selectChip event from being triggered
this.removeChip(chip);
}}
.iconFA=${'xmark'}
></dees-icon>
`
: html``}
</div>
`
)}
</div> </div>
`; `;
} }
@ -121,7 +150,7 @@ export class DeesChips extends DeesElement {
if (this.selectionMode === 'single') { if (this.selectionMode === 'single') {
return this.selectedChip?.key === chip.key; return this.selectedChip?.key === chip.key;
} else { } else {
return this.selectedChips.some(selected => selected.key === chip.key); return this.selectedChips.some((selected) => selected.key === chip.key);
} }
} }
@ -138,9 +167,9 @@ export class DeesChips extends DeesElement {
this.selectedChip = chip; this.selectedChip = chip;
this.selectedChips = [chip]; this.selectedChips = [chip];
} }
} else if(this.selectionMode === 'multiple') { } else if (this.selectionMode === 'multiple') {
if (this.isSelected(chip)) { if (this.isSelected(chip)) {
this.selectedChips = this.selectedChips.filter(selected => selected.key !== chip.key); this.selectedChips = this.selectedChips.filter((selected) => selected.key !== chip.key);
} else { } else {
this.selectedChips = [...this.selectedChips, chip]; this.selectedChips = [...this.selectedChips, chip];
} }
@ -148,4 +177,20 @@ export class DeesChips extends DeesElement {
} }
console.log(this.selectedChips); console.log(this.selectedChips);
} }
public removeChip(chipToRemove: Tag): void {
// Remove the chip from selectableChips
this.selectableChips = this.selectableChips.filter((chip) => chip.key !== chipToRemove.key);
// Remove the chip from selectedChips if present
this.selectedChips = this.selectedChips.filter((chip) => chip.key !== chipToRemove.key);
// If the removed chip was the selectedChip, set selectedChip to null
if (this.selectedChip && this.selectedChip.key === chipToRemove.key) {
this.selectedChip = null;
}
// Trigger an update to re-render the component
this.requestUpdate();
}
} }