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

fix(dees-simple-login): use dees-tile for the login credentials container

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-12 23:33:52 +00:00
parent 6047705e7d
commit bab7528f0b
3 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@@ -1,5 +1,12 @@
# Changelog # Changelog
## 2026-04-12 - 3.78.1 - fix(dees-simple-login)
use dees-tile for the login credentials container
- replace the custom login card wrapper with a dees-tile component
- update styles to target dees-tile and its content part while preserving form layout
- add a credentials heading to the login tile
## 2026-04-12 - 3.78.0 - feat(dees-settings) ## 2026-04-12 - 3.78.0 - feat(dees-settings)
add dees-settings layout component for displaying read-only settings with footer actions add dees-settings layout component for displaying read-only settings with footer actions

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '3.78.0', version: '3.78.1',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
} }

20
ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts
View File

@@ -10,6 +10,7 @@ import {
css, css,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js'; import { themeDefaultStyles } from '../../00theme.js';
import '../../00group-layout/dees-tile/dees-tile.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@@ -90,24 +91,25 @@ export class DeesSimpleLogin extends DeesElement {
color: var(--dees-color-text-muted); color: var(--dees-color-text-muted);
} }
.login-card { dees-tile {
background: var(--dees-color-bg-primary); width: 100%;
border: 1px solid var(--dees-color-border-default); }
border-radius: 8px;
dees-tile::part(content) {
padding: 24px; padding: 24px;
} }
.login-card dees-form { dees-tile dees-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
} }
.login-card dees-input-text { dees-tile dees-input-text {
width: 100%; width: 100%;
} }
.login-card dees-form-submit { dees-tile dees-form-submit {
margin-top: 8px; margin-top: 8px;
width: 100%; width: 100%;
} }
@@ -122,13 +124,13 @@ export class DeesSimpleLogin extends DeesElement {
<div class="header">Sign in</div> <div class="header">Sign in</div>
<div class="subheader">Enter your credentials to access ${this.name}</div> <div class="subheader">Enter your credentials to access ${this.name}</div>
</div> </div>
<div class="login-card"> <dees-tile .heading=${'Credentials'}>
<dees-form> <dees-form>
<dees-input-text key="username" label="Username" required></dees-input-text> <dees-input-text key="username" label="Username" required></dees-input-text>
<dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text> <dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text>
<dees-form-submit>Sign in</dees-form-submit> <dees-form-submit>Sign in</dees-form-submit>
</dees-form> </dees-form>
</div> </dees-tile>
</div> </div>
</div> </div>
<div class="slotContainer"> <div class="slotContainer">