Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 1aa06398a0 | |||
| 99b23236a1 | |||
| d1e7e5447c | |||
| 4f22a98b78 |
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@design.estate/dees-catalog",
|
||||
"version": "1.8.13",
|
||||
"version": "1.8.15",
|
||||
"private": false,
|
||||
"description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
|
||||
"main": "dist_ts_web/index.js",
|
||||
|
||||
@@ -181,7 +181,7 @@ export class DeesButton extends DeesElement {
|
||||
${this.status === 'normal' ? html``: html`
|
||||
<dees-spinner .bnw=${true} status="${this.status}"></dees-spinner>
|
||||
`}
|
||||
<div class="textbox">${this.text ? this.text : this.textContent}</div>
|
||||
<div class="textbox">${this.text || html`<slot>Button</slot>`}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -202,9 +202,6 @@ export class DeesButton extends DeesElement {
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
if (!this.textContent) {
|
||||
this.textContent = 'Button';
|
||||
this.performUpdate();
|
||||
}
|
||||
// Don't set default text here as it interferes with slotted content
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,10 +5,8 @@ import {
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
type CSSResult,
|
||||
} from '@design.estate/dees-element';
|
||||
import { DeesForm } from './dees-form.js';
|
||||
import './dees-button.js'; // Import to ensure dees-button is registered
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@@ -18,7 +16,7 @@ declare global {
|
||||
|
||||
@customElement('dees-form-submit')
|
||||
export class DeesFormSubmit extends DeesElement {
|
||||
public static demo = () => html`<dees-form-submit>This is a sloted text</dees-form-submit>`;
|
||||
public static demo = () => html`<dees-form-submit>Submit Form</dees-form-submit>`;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
@@ -39,17 +37,17 @@ export class DeesFormSubmit extends DeesElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
|
||||
public static styles = [cssManager.defaultStyles, css``];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<dees-button
|
||||
status=${this.status}
|
||||
@click=${this.submit}
|
||||
.disabled=${this.disabled}
|
||||
.text=${this.text ? this.text : this.textContent}
|
||||
status="${this.status}"
|
||||
@click="${this.submit}"
|
||||
?disabled="${this.disabled}"
|
||||
>
|
||||
${this.text || html`<slot></slot>`}
|
||||
</dees-button>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -8,16 +8,8 @@ import {
|
||||
type TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
unsafeCSS,
|
||||
type CSSResult,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
// Import components used in template
|
||||
import './dees-form.js';
|
||||
import './dees-input-text.js';
|
||||
import './dees-form-submit.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-simple-login': DeesSimpleLogin;
|
||||
@@ -126,46 +118,19 @@ export class DeesSimpleLogin extends DeesElement {
|
||||
|
||||
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
|
||||
super.firstUpdated(_changedProperties);
|
||||
const domtools = await this.domtoolsPromise;
|
||||
|
||||
// Wait a tick to ensure child elements are rendered
|
||||
await this.updateComplete;
|
||||
|
||||
const form = this.shadowRoot.querySelector('dees-form') as any;
|
||||
|
||||
if (!form) {
|
||||
console.error('dees-form element not found in dees-simple-login');
|
||||
return;
|
||||
if (form) {
|
||||
form.addEventListener('formData', (event: CustomEvent) => {
|
||||
this.dispatchEvent(new CustomEvent('login', {
|
||||
detail: event.detail,
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
// Check if the form has the readyDeferred property and wait for it
|
||||
if (form.readyDeferred?.promise) {
|
||||
try {
|
||||
await form.readyDeferred.promise;
|
||||
} catch (error) {
|
||||
console.error('Error waiting for form ready:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const username = this.shadowRoot.querySelector('dees-input-text[key="username"]');
|
||||
const password = this.shadowRoot.querySelector('dees-input-text[key="password"]');
|
||||
const submit = this.shadowRoot.querySelector('dees-form-submit');
|
||||
|
||||
// Add form data listener
|
||||
form.addEventListener('formData', (event: CustomEvent) => {
|
||||
this.dispatchEvent(new CustomEvent('login', {
|
||||
detail: event.detail,
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatches a 'login' event when the form is submitted.
|
||||
* Event detail structure: { data: { username: string, password: string } }
|
||||
*/
|
||||
|
||||
/**
|
||||
* allows switching to slotted content
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user