fix(core): update

This commit is contained in:
Philipp Kunz 2023-10-23 21:23:18 +02:00
parent 90e78a2e31
commit 81da871e38
3 changed files with 79 additions and 25 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.227', version: '1.0.228',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -0,0 +1,28 @@
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html`
<dees-chips
selectionMode="none"
.selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' },
{ key: 'account3', value: 'Payment Account 3' }
]}
></dees-chips>
<dees-chips
selectionMode="single"
.selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' },
{ key: 'account3', value: 'Payment Account 3' }
]}
></dees-chips>
<dees-chips
selectionMode="multiple"
.selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' },
{ key: 'account3', value: 'Payment Account 3' }
]}
></dees-chips>
`;

View File

@ -11,6 +11,7 @@ import {
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-chips.demo.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@ -18,29 +19,27 @@ declare global {
} }
} }
type Tag = { key: string, value: string };
@customElement('dees-chips') @customElement('dees-chips')
export class DeesChips extends DeesElement { export class DeesChips extends DeesElement {
public static demo = () => html` public static demo = demoFunc;
<dees-chips .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
<dees-chips selectionMode="multiple" .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
`;
@property() @property()
public selectionMode: 'single' | 'multiple' = 'single'; public selectionMode: 'none' | 'single' | 'multiple' = 'single';
@property({ @property({
type: Array type: Array
}) })
public selectableChips: string[] = []; public selectableChips: Tag[] = [];
@property() @property()
public selectedChip: string = null; public selectedChip: Tag = null;
@property({ @property({
type: Array type: Array
}) })
public selectedChips: string[] = []; public selectedChips: Tag[] = [];
constructor() { constructor() {
@ -57,18 +56,23 @@ export class DeesChips extends DeesElement {
} }
.mainbox { .mainbox {
user-select: none;
} }
.chip { .chip {
background: #494949; border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
display: inline-block; background: #333333;
padding: 8px 12px; display: inline-flex;
font-size: 14px; height: 20px;
line-height: 20px;
padding: 0px 8px;
font-size: 12px;
color: #fff; color: #fff;
border-radius: 40px; border-radius: 40px;
margin-right: 4px; margin-right: 4px;
margin-bottom: 8px; margin-bottom: 8px;
position: relative;
overflow: hidden;
} }
.chip:hover { .chip:hover {
@ -80,15 +84,25 @@ export class DeesChips extends DeesElement {
background: #00A3FF; background: #00A3FF;
} }
.chipKey {
background: rgba(0,0,0,0.3);
height: 100%;
display: inline-block;
margin-left: -8px;
padding-left: 8px;
padding-right: 8px;
margin-right: 8px;
}
`, `,
]; ];
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<div class="mainbox"> <div class="mainbox">
${this.selectableChips.map(chipArg => html` ${this.selectableChips.map(chip => html`
<div @click=${() => this.selectChip(chipArg)} class="chip ${this.selectedChip === chipArg || this.selectedChips.includes(chipArg) ? 'selected' : ''}"> <div @click=${() => this.selectChip(chip)} class="chip ${this.isSelected(chip) ? 'selected' : ''}">
${chipArg} ${chip.key ? html`<div class="chipKey">${chip.key}</div>` : html``}${chip.value}
</div> </div>
`)} `)}
</div> </div>
@ -102,20 +116,32 @@ export class DeesChips extends DeesElement {
} }
} }
public async selectChip(chipArg: string) { private isSelected(chip: Tag): boolean {
if (this.selectionMode === 'single') { if (this.selectionMode === 'single') {
if (this.selectedChip === chipArg) { return this.selectedChip?.key === chip.key;
} else {
return this.selectedChips.some(selected => selected.key === chip.key);
}
}
public async selectChip(chip: Tag) {
if (this.selectionMode === 'none') {
return;
}
if (this.selectionMode === 'single') {
if (this.isSelected(chip)) {
this.selectedChip = null; this.selectedChip = null;
this.selectedChips = []; this.selectedChips = [];
} else { } else {
this.selectedChip = chipArg; this.selectedChip = chip;
this.selectedChips = [chipArg]; this.selectedChips = [chip];
} }
} else if(this.selectionMode === 'multiple') { } else if(this.selectionMode === 'multiple') {
if (this.selectedChips.includes(chipArg)) { if (this.isSelected(chip)) {
this.selectedChips = this.selectedChips.filter(chipArg2 => chipArg !== chipArg2) this.selectedChips = this.selectedChips.filter(selected => selected.key !== chip.key);
} else { } else {
this.selectedChips.push(chipArg); this.selectedChips = [...this.selectedChips, chip];
} }
this.requestUpdate(); this.requestUpdate();
} }