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

feat(dees-form-submit): forward button properties to internal dees-button, use property bindings, add demo and styles

Browse Source
This commit is contained in:
Jürgen Kunz
2026-02-02 14:32:20 +00:00
parent b123768474
commit 7c62f45d77
4 changed files with 136 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
changelog.md
View File

@@ -1,5 +1,14 @@
# Changelog
## 2026-02-02 - 3.42.0 - feat(dees-form-submit)
forward button properties to internal dees-button, use property bindings, add demo and styles
- Added forwarded properties: type, size, icon, iconPosition (with defaults) and preserved text/status/disabled
- Changed template to use property bindings (.prop) for dees-button instead of string attributes
- Switched internal event handler to listen for dees-button's @clicked event (was @click)
- Added component styles (:host display and dees-button width:100%) and improved layout
- Expanded demo with multiple usage examples (basic, icons, types, sizes, states, and a form context)
## 2026-02-02 - 3.41.6 - fix(dees-simple-appdash)
respect selectedView when loading initial view, falling back to the first tab

2
ts_web/00_commitinfo_data.ts
View File

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

84
ts_web/elements/00group-form/dees-form-submit/dees-form-submit.demo.ts
View File

@@ -1,3 +1,85 @@
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html`<dees-form-submit>Submit Form</dees-form-submit>`;
export const demoFunc = () => html`
<style>
.demo-container {
display: flex;
flex-direction: column;
gap: 24px;
padding: 24px;
}
.demo-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.demo-section h3 {
margin: 0 0 8px 0;
font-size: 14px;
font-weight: 500;
color: #888;
}
.demo-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
</style>
<div class="demo-container">
<div class="demo-section">
<h3>Basic Usage</h3>
<div class="demo-row">
<dees-form-submit>Submit Form</dees-form-submit>
<dees-form-submit text="With Text Property"></dees-form-submit>
</div>
</div>
<div class="demo-section">
<h3>With Icons (inherited from DeesButton)</h3>
<div class="demo-row">
<dees-form-submit icon="lucide:send">Submit</dees-form-submit>
<dees-form-submit icon="lucide:save" iconPosition="left">Save Form</dees-form-submit>
<dees-form-submit icon="lucide:arrow-right" iconPosition="right">Continue</dees-form-submit>
</div>
</div>
<div class="demo-section">
<h3>Button Types</h3>
<div class="demo-row">
<dees-form-submit type="highlighted" icon="lucide:send">Highlighted</dees-form-submit>
<dees-form-submit type="normal" icon="lucide:send">Normal</dees-form-submit>
<dees-form-submit type="discreet" icon="lucide:send">Discreet</dees-form-submit>
</div>
</div>
<div class="demo-section">
<h3>Sizes</h3>
<div class="demo-row">
<dees-form-submit size="small" icon="lucide:send">Small</dees-form-submit>
<dees-form-submit size="normal" icon="lucide:send">Normal</dees-form-submit>
<dees-form-submit size="large" icon="lucide:send">Large</dees-form-submit>
</div>
</div>
<div class="demo-section">
<h3>States</h3>
<div class="demo-row">
<dees-form-submit status="normal" icon="lucide:send">Normal</dees-form-submit>
<dees-form-submit status="pending" icon="lucide:send">Pending</dees-form-submit>
<dees-form-submit status="success" icon="lucide:check">Success</dees-form-submit>
<dees-form-submit status="error" icon="lucide:x">Error</dees-form-submit>
<dees-form-submit disabled icon="lucide:send">Disabled</dees-form-submit>
</div>
</div>
<div class="demo-section">
<h3>In a Form Context</h3>
<dees-form>
<dees-input-text label="Name" key="name"></dees-input-text>
<dees-input-text label="Email" key="email"></dees-input-text>
<dees-form-submit icon="lucide:send" type="highlighted">Submit Form</dees-form-submit>
</dees-form>
</div>
</div>
`;

62
ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts
View File

@@ -6,6 +6,7 @@ import {
css,
cssManager,
property,
type TemplateResult,
} from '@design.estate/dees-element';
import type { DeesForm } from '../dees-form/dees-form.js';
import { themeDefaultStyles } from '../../00theme.js';
@@ -21,38 +22,61 @@ export class DeesFormSubmit extends DeesElement {
public static demo = demoFunc;
public static demoGroups = ['Form', 'Button'];
@property({
type: Boolean,
reflect: true,
})
// =============================================
// Properties forwarded to internal dees-button
// =============================================
@property({ type: Boolean, reflect: true })
accessor disabled = false;
@property({
type: String,
})
@property({ type: String })
accessor text: string;
@property({
type: String,
})
@property({ type: String })
accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
@property({ type: String, reflect: true })
accessor type: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
@property({ type: String, reflect: true })
accessor size: 'sm' | 'default' | 'lg' | 'icon' | 'small' | 'normal' | 'large' = 'default';
@property({ type: String })
accessor icon: string;
@property({ type: String })
accessor iconPosition: 'left' | 'right' = 'left';
constructor() {
super();
}
public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
`];
public render() {
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
:host {
display: inline-block;
}
dees-button {
width: 100%;
}
`,
];
public render(): TemplateResult {
return html`
<dees-button
status="${this.status}"
@click="${this.submit}"
?disabled="${this.disabled}"
.status=${this.status}
.type=${this.type}
.size=${this.size}
.icon=${this.icon}
.iconPosition=${this.iconPosition}
.text=${this.text}
?disabled=${this.disabled}
@clicked=${this.submit}
>
${this.text || html`<slot></slot>`}
<slot></slot>
</dees-button>
`;
}