diff --git a/changelog.md b/changelog.md index 3b468b4..a9aba07 100644 --- a/changelog.md +++ b/changelog.md @@ -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 diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index dee1d6f..346998a 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: '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.' } diff --git a/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.demo.ts b/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.demo.ts index c4075d9..34f827d 100644 --- a/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.demo.ts +++ b/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.demo.ts @@ -1,3 +1,85 @@ import { html } from '@design.estate/dees-element'; -export const demoFunc = () => html`Submit Form`; \ No newline at end of file +export const demoFunc = () => html` + +
+
+

Basic Usage

+
+ Submit Form + +
+
+ +
+

With Icons (inherited from DeesButton)

+
+ Submit + Save Form + Continue +
+
+ +
+

Button Types

+
+ Highlighted + Normal + Discreet +
+
+ +
+

Sizes

+
+ Small + Normal + Large +
+
+ +
+

States

+
+ Normal + Pending + Success + Error + Disabled +
+
+ +
+

In a Form Context

+ + + + Submit Form + +
+
+`; diff --git a/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts b/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts index fc159b0..6f7147f 100644 --- a/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts +++ b/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts @@ -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` - ${this.text || html``} + `; }