diff --git a/package.json b/package.json index 744b39d..1481990 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "dependencies": { "@design.estate/dees-domtools": "^2.3.3", "@design.estate/dees-element": "^2.0.45", - "@design.estate/dees-wcctools": "^1.0.101", + "@design.estate/dees-wcctools": "^1.1.0", "@fortawesome/fontawesome-svg-core": "^6.7.2", "@fortawesome/free-brands-svg-icons": "^6.7.2", "@fortawesome/free-regular-svg-icons": "^6.7.2", @@ -36,7 +36,7 @@ "apexcharts": "^4.7.0", "highlight.js": "11.11.1", "ibantools": "^4.5.1", - "lucide": "^0.523.0", + "lucide": "^0.525.0", "monaco-editor": "^0.52.2", "pdfjs-dist": "^4.10.38", "xterm": "^5.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 14e0902..18fc7b8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,8 +15,8 @@ importers: specifier: ^2.0.45 version: 2.0.45 '@design.estate/dees-wcctools': - specifier: ^1.0.101 - version: 1.0.101 + specifier: ^1.1.0 + version: 1.1.0 '@fortawesome/fontawesome-svg-core': specifier: ^6.7.2 version: 6.7.2 @@ -72,8 +72,8 @@ importers: specifier: ^4.5.1 version: 4.5.1 lucide: - specifier: ^0.523.0 - version: 0.523.0 + specifier: ^0.525.0 + version: 0.525.0 monaco-editor: specifier: ^0.52.2 version: 0.52.2 @@ -323,8 +323,8 @@ packages: '@design.estate/dees-element@2.0.45': resolution: {integrity: sha512-dj8nOOtfwvqEtQceTXQQ5IEy75HIFZ+iuDxPeIynLedYpxtHPsxFrHW8IQ7/ad9MNvVO0kTnlwUOmkjylul+DA==} - '@design.estate/dees-wcctools@1.0.101': - resolution: {integrity: sha512-6j2kGORf7egRkHGwQUNuxSdTe2+6y7eX3+dVomBLeWczH30KhPi1jJKINSt/MqkpB5i7o3kQwvvWA6JYBOjXcg==} + '@design.estate/dees-wcctools@1.1.0': + resolution: {integrity: sha512-eniG2JsGgcVXQLkSE6M7azJ7av/UeTvvzhE6s3JbcIieHd589SCxQqF+BhlOyKqzJQ1n5jJ7KKdmhvQU5bbdtg==} '@emnapi/core@1.4.3': resolution: {integrity: sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==} @@ -3481,8 +3481,8 @@ packages: resolution: {integrity: sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==} engines: {node: '>=16.14'} - lucide@0.523.0: - resolution: {integrity: sha512-tiIp5xEP4kpeulfT1J+a/NEaIZGT1k6RyMS3evQWfHRhJvR8uTat/+lN4wnX5qIexOwN02BhmcyMHBNwt+jkLA==} + lucide@0.525.0: + resolution: {integrity: sha512-sfehWlaE/7NVkcEQ4T9JD3eID8RNMIGJBBUq9wF3UFiJIrcMKRbU3g1KGfDk4svcW7yw8BtDLXaXo02scDtUYQ==} make-dir@3.1.0: resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==} @@ -5588,7 +5588,7 @@ snapshots: - supports-color - vue - '@design.estate/dees-wcctools@1.0.101': + '@design.estate/dees-wcctools@1.1.0': dependencies: '@design.estate/dees-domtools': 2.3.3 '@design.estate/dees-element': 2.0.45 @@ -5905,10 +5905,8 @@ snapshots: transitivePeerDependencies: - '@nuxt/kit' - '@swc/helpers' - - bufferutil - react - supports-color - - utf-8-validate - vue '@hapi/bourne@3.0.0': {} @@ -9564,7 +9562,7 @@ snapshots: lru-cache@8.0.5: {} - lucide@0.523.0: {} + lucide@0.525.0: {} make-dir@3.1.0: dependencies: diff --git a/ts_web/elements/dees-chips.demo.ts b/ts_web/elements/dees-chips.demo.ts index 6db382e..9e6db08 100644 --- a/ts_web/elements/dees-chips.demo.ts +++ b/ts_web/elements/dees-chips.demo.ts @@ -1,41 +1,112 @@ -import { html } from '@design.estate/dees-element'; +import { html, cssManager } from '@design.estate/dees-element'; export const demoFunc = () => html`
- - - +
+
Non-Selectable Chips
+
Basic chips without selection capability. Use for display-only tags.
+ +
+ +
+
Single Selection Chips
+
Click to select one chip at a time. Useful for filters and options.
+ +
+ +
+
Multiple Selection Chips
+
Select multiple chips simultaneously. Great for tag selection.
+ +
+ +
+
Removable Chips with Keys
+
Chips with remove buttons and key-value pairs. Perfect for dynamic lists.
+ +
+ +
+
Mixed Content Example
+
Combining different chip types for complex UIs.
+ +
`; diff --git a/ts_web/elements/dees-chips.ts b/ts_web/elements/dees-chips.ts index 5cad5b8..cc0f37a 100644 --- a/ts_web/elements/dees-chips.ts +++ b/ts_web/elements/dees-chips.ts @@ -60,52 +60,93 @@ export class DeesChips extends DeesElement { .mainbox { user-select: none; + display: flex; + flex-wrap: wrap; + gap: 8px; } .chip { - border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')}; - background: #333333; + background: ${cssManager.bdTheme('#f4f4f5', '#27272a')}; + border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#3f3f46')}; display: inline-flex; - height: 20px; - line-height: 20px; - padding: 0px 8px; - font-size: 12px; - color: #fff; - border-radius: 40px; - margin-right: 4px; - margin-bottom: 4px; + align-items: center; + height: 32px; + padding: 0px 12px; + font-size: 14px; + font-weight: 500; + color: ${cssManager.bdTheme('#09090b', '#fafafa')}; + border-radius: 6px; position: relative; - overflow: hidden; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); + cursor: pointer; + transition: all 0.15s ease; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .chip:hover { - background: #666666; + background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')}; + border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')}; + } + + .chip:active { + transform: scale(0.98); } .chip.selected { - background: #00a3ff; + background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')}; + border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')}; + color: #ffffff; + } + + .chip.selected:hover { + background: ${cssManager.bdTheme('#2563eb', '#2563eb')}; + border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')}; } .chipKey { - background: rgba(0, 0, 0, 0.3); - height: 100%; - display: inline-block; + background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')}; + height: 20px; + line-height: 20px; + display: inline-flex; + align-items: center; margin-left: -8px; - padding-left: 8px; - padding-right: 8px; + padding: 0px 8px; margin-right: 8px; + border-radius: 4px; + font-size: 12px; + font-weight: 600; + color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; + } + + .chip.selected .chipKey { + background: rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.9); } dees-icon { - padding: 0px 6px 0px 4px; - margin-left: 4px; - margin-right: -8px; - background: rgba(0, 0, 0, 0.3); + display: flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + margin-left: 8px; + margin-right: -6px; + border-radius: 3px; + transition: all 0.15s ease; + color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; + } + + .chip.selected dees-icon { + color: rgba(255, 255, 255, 0.8); } dees-icon:hover { - background: #e4002b; + background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')}; + color: ${cssManager.bdTheme('#ef4444', '#ef4444')}; + } + + .chip.selected dees-icon:hover { + background: rgba(255, 255, 255, 0.2); + color: #ffffff; } `, ]; @@ -139,19 +180,25 @@ export class DeesChips extends DeesElement { } public async firstUpdated() { - if (!this.textContent) { - this.textContent = 'Button'; - this.performUpdate(); - } + // Component initialized } private isSelected(chip: Tag): boolean { if (this.selectionMode === 'single') { - return this.selectedChip?.key === chip.key; + return this.selectedChip ? this.isSameChip(this.selectedChip, chip) : false; } else { - return this.selectedChips.some((selected) => selected.key === chip.key); + return this.selectedChips.some((selected) => this.isSameChip(selected, chip)); } } + + private isSameChip(chip1: Tag, chip2: Tag): boolean { + // If both have keys, compare by key + if (chip1.key && chip2.key) { + return chip1.key === chip2.key; + } + // Otherwise compare by value (and key if present) + return chip1.value === chip2.value && chip1.key === chip2.key; + } public async selectChip(chip: Tag) { if (this.selectionMode === 'none') { @@ -168,7 +215,7 @@ export class DeesChips extends DeesElement { } } else if (this.selectionMode === 'multiple') { if (this.isSelected(chip)) { - this.selectedChips = this.selectedChips.filter((selected) => selected.key !== chip.key); + this.selectedChips = this.selectedChips.filter((selected) => !this.isSameChip(selected, chip)); } else { this.selectedChips = [...this.selectedChips, chip]; } @@ -179,13 +226,13 @@ export class DeesChips extends DeesElement { public removeChip(chipToRemove: Tag): void { // Remove the chip from selectableChips - this.selectableChips = this.selectableChips.filter((chip) => chip.key !== chipToRemove.key); + this.selectableChips = this.selectableChips.filter((chip) => !this.isSameChip(chip, chipToRemove)); // Remove the chip from selectedChips if present - this.selectedChips = this.selectedChips.filter((chip) => chip.key !== chipToRemove.key); + this.selectedChips = this.selectedChips.filter((chip) => !this.isSameChip(chip, chipToRemove)); // If the removed chip was the selectedChip, set selectedChip to null - if (this.selectedChip && this.selectedChip.key === chipToRemove.key) { + if (this.selectedChip && this.isSameChip(this.selectedChip, chipToRemove)) { this.selectedChip = null; }