feat(structure): adjust

ts_web/elements/dees-form-submit/dees-form-submit.demo.ts

@@ -0,0 +1,3 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`<dees-form-submit>Submit Form</dees-form-submit>`;

ts_web/elements/dees-form-submit/dees-form-submit.ts

@@ -0,0 +1,74 @@
+import { demoFunc } from './dees-form-submit.demo.js';
+import {
+  customElement,
+  html,
+  DeesElement,
+  css,
+  cssManager,
+  property,
+} from '@design.estate/dees-element';
+import type { DeesForm } from './dees-form.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-form-submit': DeesFormSubmit;
+  }
+}
+
+@customElement('dees-form-submit')
+export class DeesFormSubmit extends DeesElement {
+  public static demo = demoFunc;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  accessor disabled = false;
+
+  @property({
+    type: String,
+  })
+  accessor text: string;
+
+  @property({
+    type: String,
+  })
+  accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
+  constructor() {
+    super();
+  }
+  
+  public static styles = [cssManager.defaultStyles, css``];
+
+  public render() {
+    return html`
+      <dees-button
+        status="${this.status}"
+        @click="${this.submit}"
+        ?disabled="${this.disabled}"
+      >
+        ${this.text || html`<slot></slot>`}
+      </dees-button>
+    `;
+  }
+
+  public async submit() {
+    if (this.disabled) {
+      return;
+    }
+    // Walk up the DOM tree to find the nearest dees-form element
+    const parentFormElement = this.closest('dees-form') as DeesForm;
+    if (parentFormElement && parentFormElement.gatherAndDispatch) {
+      parentFormElement.gatherAndDispatch();
+    }
+  }
+
+  public async focus() {
+    const domtools = await this.domtoolsPromise;
+    if (!this.disabled) {
+      await domtools.convenience.smartdelay.delayFor(0);
+      this.submit();
+    }
+  }
+}