fix(core): update
This commit is contained in:
parent
844cc30551
commit
8e0062fdd5
@ -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'
|
||||||
}
|
}
|
||||||
|
@ -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' },
|
||||||
|
@ -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,11 +42,10 @@ 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,7 +76,7 @@ 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 {
|
||||||
@ -82,11 +85,11 @@ export class DeesChips extends DeesElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
@ -95,17 +98,43 @@ export class DeesChips extends DeesElement {
|
|||||||
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
|
||||||
|
@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>
|
</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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user