design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-27 21:16:52 +00:00
parent 296d254ba2
commit 896bc2bbb1
2 changed files with 105 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
ts_web/elements/dees-input-multitoggle.ts
View File

@ -57,9 +57,12 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
} else {
this.selectedOption = val as string;
}
this.requestUpdate();
// Defer indicator update to next frame if component not yet updated
if (this.hasUpdated) {
this.setIndicator();
requestAnimationFrame(() => {
this.setIndicator();
});
}
}
@ -68,59 +71,71 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
cssManager.defaultStyles,
css`
:host {
color: ${cssManager.bdTheme('#333', '#ccc')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
user-select: none;
}
.selections {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background: ${cssManager.bdTheme('#fff', '#222')};
width: min-content;
border-radius: 20px;
height: 32px;
border-top: 1px solid ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
display: inline-flex;
align-items: center;
background: ${cssManager.bdTheme('#ffffff', '#18181b')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
padding: 4px;
border-radius: 8px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.option {
color: ${cssManager.bdTheme('#666', '#999')};
position: relative;
padding: 0px 16px;
line-height: 32px;
cursor: default;
width: min-content; /* Make the width as per the content */
white-space: nowrap; /* Prevent text wrapping */
transition: all 0.1s;
padding: 8px 20px;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
transition: color 0.2s ease;
font-size: 14px;
transform: translateY(-1px);
font-weight: 500;
color: ${cssManager.bdTheme('#71717a', '#71717a')};
line-height: 1;
z-index: 2;
}
.option:hover {
color: ${cssManager.bdTheme('#333', '#fff')};
color: ${cssManager.bdTheme('#18181b', '#e4e4e7')};
}
.option.selected {
color: ${cssManager.bdTheme('#fff', '#fff')};
color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
}
.indicator {
opacity: 0;
position: absolute;
height: 24px;
left: 4px;
top: 3px;
border-radius: 16px;
background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
min-width: 24px;
transition: all 0.1s ease-in-out;
height: calc(100% - 8px);
top: 4px;
border-radius: 6px;
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.15)', 'rgba(59, 130, 246, 0.15)')};
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.indicator.no-transition {
transition: none;
}
:host([disabled]) .selections {
opacity: 0.5;
cursor: not-allowed;
}
:host([disabled]) .option {
cursor: not-allowed;
pointer-events: none;
}
:host([disabled]) .indicator {
background: ${cssManager.bdTheme('rgba(113, 113, 122, 0.15)', 'rgba(113, 113, 122, 0.15)')};
}
`,
];
@ -165,10 +180,14 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
}
public async handleSelection(optionArg: string) {
if (this.disabled) return;
this.selectedOption = optionArg;
this.requestUpdate();
this.changeSubject.next(this);
await this.updateComplete;
this.setIndicator();
}
private indicatorInitialized = false;
public async setIndicator() {
@ -199,8 +218,8 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
}, 50);
}
indicator.style.width = `${option.clientWidth - 8}px`;
indicator.style.left = `${option.offsetLeft + 4}px`;
indicator.style.width = `${option.clientWidth}px`;
indicator.style.left = `${option.offsetLeft}px`;
indicator.style.opacity = '1';
}
}
@ -218,8 +237,11 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
} else {
this.selectedOption = value as string;
}
this.requestUpdate();
if (this.hasUpdated) {
this.setIndicator();
requestAnimationFrame(() => {
this.setIndicator();
});
}
}
}