diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index f398d59..467038a 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
- version: '1.0.227',
+ version: '1.0.228',
description: 'website for lossless.com'
}
diff --git a/ts_web/elements/dees-chips.demo.ts b/ts_web/elements/dees-chips.demo.ts
new file mode 100644
index 0000000..86bec92
--- /dev/null
+++ b/ts_web/elements/dees-chips.demo.ts
@@ -0,0 +1,28 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+
+
+
+`;
diff --git a/ts_web/elements/dees-chips.ts b/ts_web/elements/dees-chips.ts
index 8de8a36..d6a1bd6 100644
--- a/ts_web/elements/dees-chips.ts
+++ b/ts_web/elements/dees-chips.ts
@@ -11,6 +11,7 @@ import {
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-chips.demo.js';
declare global {
interface HTMLElementTagNameMap {
@@ -18,29 +19,27 @@ declare global {
}
}
+type Tag = { key: string, value: string };
+
@customElement('dees-chips')
export class DeesChips extends DeesElement {
- public static demo = () => html`
-
-
-
- `;
+ public static demo = demoFunc;
@property()
- public selectionMode: 'single' | 'multiple' = 'single';
+ public selectionMode: 'none' | 'single' | 'multiple' = 'single';
@property({
type: Array
})
- public selectableChips: string[] = [];
+ public selectableChips: Tag[] = [];
@property()
- public selectedChip: string = null;
+ public selectedChip: Tag = null;
@property({
type: Array
})
- public selectedChips: string[] = [];
+ public selectedChips: Tag[] = [];
constructor() {
@@ -57,18 +56,23 @@ export class DeesChips extends DeesElement {
}
.mainbox {
-
+ user-select: none;
}
.chip {
- background: #494949;
- display: inline-block;
- padding: 8px 12px;
- font-size: 14px;
+ border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
+ background: #333333;
+ display: inline-flex;
+ height: 20px;
+ line-height: 20px;
+ padding: 0px 8px;
+ font-size: 12px;
color: #fff;
border-radius: 40px;
margin-right: 4px;
margin-bottom: 8px;
+ position: relative;
+ overflow: hidden;
}
.chip:hover {
@@ -79,6 +83,16 @@ export class DeesChips extends DeesElement {
.chip.selected {
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;
+ }
`,
];
@@ -86,9 +100,9 @@ export class DeesChips extends DeesElement {
public render(): TemplateResult {
return html`
- ${this.selectableChips.map(chipArg => html`
-
this.selectChip(chipArg)} class="chip ${this.selectedChip === chipArg || this.selectedChips.includes(chipArg) ? 'selected' : ''}">
- ${chipArg}
+ ${this.selectableChips.map(chip => html`
+
this.selectChip(chip)} class="chip ${this.isSelected(chip) ? 'selected' : ''}">
+ ${chip.key ? html`
${chip.key}
` : html``}${chip.value}
`)}
@@ -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.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.selectedChips = [];
} else {
- this.selectedChip = chipArg;
- this.selectedChips = [chipArg];
+ this.selectedChip = chip;
+ this.selectedChips = [chip];
}
} else if(this.selectionMode === 'multiple') {
- if (this.selectedChips.includes(chipArg)) {
- this.selectedChips = this.selectedChips.filter(chipArg2 => chipArg !== chipArg2)
+ if (this.isSelected(chip)) {
+ this.selectedChips = this.selectedChips.filter(selected => selected.key !== chip.key);
} else {
- this.selectedChips.push(chipArg);
+ this.selectedChips = [...this.selectedChips, chip];
}
this.requestUpdate();
}