diff --git a/.vscode/settings.json b/.vscode/settings.json --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,10 +7,12 @@ "**/.factorypath": true }, "cSpell.words": [ + "attrmodified", "dijit", "djbase", "djclass", "Unsubscribable", + "Validatable", "wpos" ] } \ No newline at end of file diff --git a/djx/package-lock.json b/djx/package-lock.json --- a/djx/package-lock.json +++ b/djx/package-lock.json @@ -10,7 +10,7 @@ "license": "BSD-2-Clause", "devDependencies": { "@implab/core-amd": "^1.4.6", - "@implab/dojo-typings": "1.0.3", + "@implab/dojo-typings": "1.0.7", "@types/chai": "4.1.3", "@types/requirejs": "2.1.31", "@types/tap": "15.0.7", @@ -452,9 +452,9 @@ } }, "node_modules/@implab/dojo-typings": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@implab/dojo-typings/-/dojo-typings-1.0.3.tgz", - "integrity": "sha512-oyCiuU5ay9MfvdQtZNJSeV30jKufdiLBAcq6rn360pww2hzdqvWEeoU9/New8fMzyNiaEumOlgbcS11EVIH+Jg==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@implab/dojo-typings/-/dojo-typings-1.0.7.tgz", + "integrity": "sha512-/d4gi5vWXyl7Y4aI08z24mrZKiKePgScFQUEGW8ko9fdL8yHj5CLIP6beQn5n4ZlIGFFx3vcu0MwxH3lJwY3oA==", "dev": true }, "node_modules/@istanbuljs/load-nyc-config": { @@ -7056,9 +7056,9 @@ "requires": {} }, "@implab/dojo-typings": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@implab/dojo-typings/-/dojo-typings-1.0.3.tgz", - "integrity": "sha512-oyCiuU5ay9MfvdQtZNJSeV30jKufdiLBAcq6rn360pww2hzdqvWEeoU9/New8fMzyNiaEumOlgbcS11EVIH+Jg==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@implab/dojo-typings/-/dojo-typings-1.0.7.tgz", + "integrity": "sha512-/d4gi5vWXyl7Y4aI08z24mrZKiKePgScFQUEGW8ko9fdL8yHj5CLIP6beQn5n4ZlIGFFx3vcu0MwxH3lJwY3oA==", "dev": true }, "@istanbuljs/load-nyc-config": { diff --git a/djx/package.json b/djx/package.json --- a/djx/package.json +++ b/djx/package.json @@ -26,7 +26,7 @@ "@types/tap": "15.0.7", "rxjs": "7.5.6", "dojo": "1.16.0", - "@implab/dojo-typings": "1.0.3", + "@implab/dojo-typings": "1.0.7", "@typescript-eslint/eslint-plugin": "^5.23.0", "@typescript-eslint/parser": "^5.23.0", "eslint": "^8.28.0", diff --git a/djx/src/main/ts/form/Form.tsx b/djx/src/main/ts/form/Form.tsx new file mode 100644 --- /dev/null +++ b/djx/src/main/ts/form/Form.tsx @@ -0,0 +1,134 @@ + +import { djbase, djclass } from "../declare"; +import { attach, createElement } from "../tsx"; +import { DjxWidgetBase } from "../tsx/DjxWidgetBase"; +import _FormMixin from "./_FormMixin"; + + +/** This widget represents a document section containing interactive controls + * for submitting information. + */ +@djclass +export default class Form extends djbase(DjxWidgetBase, _FormMixin) { + + /** Name of form for scripting. */ + name?: string; + + /** The URL that processes the form submission. */ + action?: string; + + /** The HTTP method to submit the form with. */ + method?: "POST" | "GET" | "DIALOG"; + + /** If the value of the method attribute is post, enctype is the MIME type + * of the form submission. + */ + enctype?: string; + + /** Comma-separated content types the server accepts. + * + * @deprecated This attribute has been deprecated and should not be used. + * Instead, use the accept attribute on elements. + */ + accept?: string; + + /** Space-separated character encodings the server accepts. The browser + * uses them in the order in which they are listed. + */ + "accept-charset"?: string; + + /** Indicates where to display the response after submitting the form. It + * is a name/keyword for a browsing context (for example, tab, window, or + * iframe). + */ + target?: string; + + /** Indicates whether input elements can by default have their values + * automatically completed by the browser. `autocomplete` attributes on form + * elements override it on `
`. + */ + autocomplete?: "off" | "on"; + + + /** This Boolean attribute indicates that the form shouldn't be validated + * when submitted. If this attribute is not set the form is validated, it + * can be overridden by a `formnovalidate` attribute on a `
; diff --git a/playground/src/main/ts/view/NewAppointment.tsx b/playground/src/main/ts/view/NewAppointment.tsx new file mode 100644 --- /dev/null +++ b/playground/src/main/ts/view/NewAppointment.tsx @@ -0,0 +1,60 @@ +import { id as mid } from "module"; +import { djbase, djclass } from "@implab/djx/declare"; +import { attach, bind, createElement, prop } from "@implab/djx/tsx"; +import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase"; +import Form from "@implab/djx/form/Form"; +import { LocalDateTime } from "@js-joda/core"; +import { TraceSource } from "@implab/core-amd/log/TraceSource"; +import DateTextBox = require("dijit/form/DateTextBox"); +import Button = require("dijit/form/Button"); +import ValidationTextBox = require("dijit/form/ValidationTextBox"); + +const trace = TraceSource.get(mid); + +interface NewAppointmentProps { + title: string; + + startAt?: Date; +} + +@djclass +export default class NewAppointment extends djbase(DjxWidgetBase) { + value: NewAppointmentProps = {title: "Appointment 1"}; + + render() { + return
+ ref={bind("value", prop(this, "value"))} + method="DIALOG" + onSubmit={this._onSubmit} + onReset={this._onReset} + onValidStateChange={this._onValidStateChange} + onValueChange={this._onValueChange} + > +

+

+ + +
; + } + + private readonly _onSubmit = (evt: Event) => { + trace.debug("onSubmit"); + }; + + private readonly _onValidStateChange = (isValid?: boolean) => { + trace.debug("isValid={0}", isValid); + }; + + private readonly _onValueChange = (value: NewAppointmentProps) => { + trace.debug("valueChange={0}", value); + }; + + private readonly _onReset = (evt: Event) => { + trace.debug("onReset"); + //evt.preventDefault(); + }; + +} \ No newline at end of file