Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 1aa06398a0 | |||
| 99b23236a1 | |||
| d1e7e5447c | |||
| 4f22a98b78 |
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@design.estate/dees-catalog",
|
"name": "@design.estate/dees-catalog",
|
||||||
"version": "1.8.13",
|
"version": "1.8.15",
|
||||||
"private": false,
|
"private": false,
|
||||||
"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.",
|
||||||
"main": "dist_ts_web/index.js",
|
"main": "dist_ts_web/index.js",
|
||||||
|
|||||||
@@ -181,7 +181,7 @@ export class DeesButton extends DeesElement {
|
|||||||
${this.status === 'normal' ? html``: html`
|
${this.status === 'normal' ? html``: html`
|
||||||
<dees-spinner .bnw=${true} status="${this.status}"></dees-spinner>
|
<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>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@@ -202,9 +202,6 @@ export class DeesButton extends DeesElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public async firstUpdated() {
|
public async firstUpdated() {
|
||||||
if (!this.textContent) {
|
// Don't set default text here as it interferes with slotted content
|
||||||
this.textContent = 'Button';
|
|
||||||
this.performUpdate();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,10 +5,8 @@ import {
|
|||||||
css,
|
css,
|
||||||
cssManager,
|
cssManager,
|
||||||
property,
|
property,
|
||||||
type CSSResult,
|
|
||||||
} from '@design.estate/dees-element';
|
} from '@design.estate/dees-element';
|
||||||
import { DeesForm } from './dees-form.js';
|
import { DeesForm } from './dees-form.js';
|
||||||
import './dees-button.js'; // Import to ensure dees-button is registered
|
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
@@ -18,7 +16,7 @@ declare global {
|
|||||||
|
|
||||||
@customElement('dees-form-submit')
|
@customElement('dees-form-submit')
|
||||||
export class DeesFormSubmit extends DeesElement {
|
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({
|
@property({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@@ -45,11 +43,11 @@ export class DeesFormSubmit extends DeesElement {
|
|||||||
public render() {
|
public render() {
|
||||||
return html`
|
return html`
|
||||||
<dees-button
|
<dees-button
|
||||||
status=${this.status}
|
status="${this.status}"
|
||||||
@click=${this.submit}
|
@click="${this.submit}"
|
||||||
.disabled=${this.disabled}
|
?disabled="${this.disabled}"
|
||||||
.text=${this.text ? this.text : this.textContent}
|
|
||||||
>
|
>
|
||||||
|
${this.text || html`<slot></slot>`}
|
||||||
</dees-button>
|
</dees-button>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,16 +8,8 @@ import {
|
|||||||
type TemplateResult,
|
type TemplateResult,
|
||||||
cssManager,
|
cssManager,
|
||||||
css,
|
css,
|
||||||
unsafeCSS,
|
|
||||||
type CSSResult,
|
|
||||||
state,
|
|
||||||
} from '@design.estate/dees-element';
|
} 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 {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
'dees-simple-login': DeesSimpleLogin;
|
'dees-simple-login': DeesSimpleLogin;
|
||||||
@@ -126,32 +118,9 @@ export class DeesSimpleLogin extends DeesElement {
|
|||||||
|
|
||||||
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
|
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
|
||||||
super.firstUpdated(_changedProperties);
|
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;
|
const form = this.shadowRoot.querySelector('dees-form') as any;
|
||||||
|
if (form) {
|
||||||
if (!form) {
|
|
||||||
console.error('dees-form element not found in dees-simple-login');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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) => {
|
form.addEventListener('formData', (event: CustomEvent) => {
|
||||||
this.dispatchEvent(new CustomEvent('login', {
|
this.dispatchEvent(new CustomEvent('login', {
|
||||||
detail: event.detail,
|
detail: event.detail,
|
||||||
@@ -160,11 +129,7 @@ export class DeesSimpleLogin extends DeesElement {
|
|||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
/**
|
|
||||||
* Dispatches a 'login' event when the form is submitted.
|
|
||||||
* Event detail structure: { data: { username: string, password: string } }
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* allows switching to slotted content
|
* allows switching to slotted content
|
||||||
|
|||||||
Reference in New Issue
Block a user