diff --git a/api/js/etemplate/et2-button.ts b/api/js/etemplate/et2-button.ts index 8a1cd81c5b..8732deef3e 100644 --- a/api/js/etemplate/et2-button.ts +++ b/api/js/etemplate/et2-button.ts @@ -60,8 +60,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton)) // Define a default click handler // If a different one gets set via attribute, it will be used instead this.onclick = (typeof this.onclick === "function") ? this.onclick : () => { - debugger; - this.getInstanceManager().submit(); + return this.getInstanceManager().submit(); }; } @@ -82,6 +81,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton)) _handleClick(event: MouseEvent) : boolean { + debugger; // ignore click on readonly button if (this.disabled) return false; diff --git a/api/js/etemplate/et2-textbox.ts b/api/js/etemplate/et2-textbox.ts new file mode 100644 index 0000000000..6317f9dbb9 --- /dev/null +++ b/api/js/etemplate/et2-textbox.ts @@ -0,0 +1,50 @@ +/** + * EGroupware eTemplate2 - Button widget + * + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @package etemplate + * @subpackage api + * @link https://www.egroupware.org + * @author Nathan Gray + */ + + +import {css,html} from "../../../node_modules/@lion/core/index.js"; +import {LionInput} from "../../../node_modules/@lion/input/index.js"; +import {Et2InputWidget} from "./et2_core_inputWidget"; +import {Et2Widget} from "./et2_core_inheritance"; + +export class Et2Textbox extends Et2InputWidget(Et2Widget(LionInput)) +{ + + static get styles() { + return [ + ...super.styles, + css` + /* Custom CSS */ + `, + ]; + } + + static get properties() { + return { + ...super.properties, + value: {attribute: true}, + onclick: {type: Function} + } + } + + constructor() + { + debugger; + super(); + + } + + connectedCallback() + { + super.connectedCallback(); + + } +} +customElements.define("et2-textbox",Et2Textbox); diff --git a/api/js/etemplate/et2_core_inheritance.ts b/api/js/etemplate/et2_core_inheritance.ts index 2c9621cf36..9a2a6b1948 100644 --- a/api/js/etemplate/et2_core_inheritance.ts +++ b/api/js/etemplate/et2_core_inheritance.ts @@ -260,7 +260,7 @@ export class ClassWithAttributes extends ClassWithInterfaces */ type Constructor = new (...args: any[]) => T; -export const Et2Widget = (superClass: T) => { +export const Et2Widget = >(superClass: T) => { class Et2WidgetClass extends superClass implements et2_IDOMNode { /** et2_widget compatability **/ @@ -271,6 +271,12 @@ export const Et2Widget = (superClass: T) => { /** WebComponent **/ static get properties() { return { + ...super.properties, + + /** + * Tooltip which is shown for this element on hover + */ + statustext: {type: String}, label: {type: String}, onclick: { type: Function, @@ -372,7 +378,16 @@ export const Et2Widget = (superClass: T) => { // TODO: children } loadingFinished() - {} + { + /** + * This is needed mostly as a bridge between non-WebComponent widgets and + * connectedCallback(). It's not really needed if the whole tree is WebComponent. + * WebComponents can be added as children immediately after createion, and they handle the + * rest themselves with their normal lifecycle (especially connectedCallback(), which is kind + * of the equivalent of doLoadingFinished() + */ + this.getParent().getDOMNode(this).append(this); + } getWidgetById(_id) { if (this.id == _id) { @@ -523,5 +538,19 @@ export const Et2Widget = (superClass: T) => { return false; } }; + + function applyMixins(derivedCtor: any, baseCtors: any[]) { + baseCtors.forEach(baseCtor => { + Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => { + if (name !== 'constructor') { + derivedCtor.prototype[name] = baseCtor.prototype[name]; + } + }); + }); + } + + // Add some more stuff in + applyMixins(Et2WidgetClass, [ClassWithInterfaces]); + return Et2WidgetClass as unknown as Constructor & T; } \ No newline at end of file diff --git a/api/js/etemplate/et2_core_inputWidget.ts b/api/js/etemplate/et2_core_inputWidget.ts index 2da41e2c8a..ef25a517f7 100644 --- a/api/js/etemplate/et2_core_inputWidget.ts +++ b/api/js/etemplate/et2_core_inputWidget.ts @@ -388,7 +388,7 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_ * This mixin will allow any LitElement to become an Et2InputWidget * * Usage: - * export class Et2Button extends Et2InputWidget(BXButton) {...} + * export class Et2Button extends Et2InputWidget(Et2Widget(LitWidget)) {...} */ type Constructor = new (...args: any[]) => T; @@ -399,18 +399,28 @@ export const Et2InputWidget = (superClass: T) => { protected value: string | number | Object; protected _oldValue: string | number | Object; + /** WebComponent **/ + static get properties() { + return { + ...super.properties, + value: {attribute: false} + }; + } + constructor() { + super(); + + // Add statustext hover + + } + + set_value(new_value) + { + this.modelValue=new_value; + } getValue() { - var node = this.getInputNode(); - if (node) - { - var val = jQuery(node).val(); - - return val; - } - - return this._oldValue; + return this._inputNode.value; } isDirty() @@ -464,19 +474,8 @@ export const Et2InputWidget = (superClass: T) => { getInputNode() { - return this.node; - } - - /** - * These belongs somewhere else/higher, I'm just getting it to work - */ - loadingFinished() - {} - getWidgetById(_id) - { - if (this.id == _id) { - return this; - } + // From LionInput + return this._inputNode; } }; return Et2InputWidgetClass as unknown as Constructor & T; diff --git a/api/js/etemplate/et2_core_widget.ts b/api/js/etemplate/et2_core_widget.ts index b28009a32b..4a11e1f8ec 100644 --- a/api/js/etemplate/et2_core_widget.ts +++ b/api/js/etemplate/et2_core_widget.ts @@ -25,6 +25,7 @@ import {et2_IDOMNode, et2_IInputNode} from "./et2_core_interfaces"; // fixing circular dependencies by only importing type import type {et2_container} from "./et2_core_baseWidget"; import type {et2_inputWidget, et2_input} from "./et2_core_inputWidget"; +import {Et2InputWidget} from "./et2_core_inputWidget"; /** * The registry contains all XML tag names and the corresponding widget @@ -758,7 +759,7 @@ export class et2_widget extends ClassWithAttributes } widget.setParent(this); var mgr = widget.getArrayMgr("content"); - +debugger; // Apply any set attributes - widget will do its own coercion _node.getAttributeNames().forEach(attribute => { let attrValue = _node.getAttribute(attribute); @@ -776,6 +777,22 @@ export class et2_widget extends ClassWithAttributes widget.setAttribute(attribute, attrValue); }); + if(widget_class.getPropertyOptions("value") && widget.set_value) + { + if (mgr != null) { + let val = mgr.getEntry(widget.id, false, true); + if (val !== null) + { + widget.setAttribute("value", val); + } + } + // Check for already inside namespace + if(this._createNamespace() && this.getArrayMgr("content").perspectiveData.owner == this) + { + widget.setAttribute("value", this.getArrayMgr("content").data); + } + } + // Children need to be loaded //this.loadFromXML(_node); return widget; diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts index bf62caa837..5ce297ab61 100644 --- a/api/js/etemplate/etemplate2.ts +++ b/api/js/etemplate/etemplate2.ts @@ -24,6 +24,7 @@ import {et2_tabbox} from "./et2_widget_tabs"; import '../jsapi/egw_json.js'; import {egwIsMobile} from "../egw_action/egw_action_common.js"; import './et2-button'; +import './et2-textbox'; /* Include all widget classes here, we only care about them registering, not importing anything*/ import './et2_widget_vfs'; // Vfs must be first (before et2_widget_file) due to import cycle import './et2_widget_template'; diff --git a/api/src/Etemplate/Widget/Textbox.php b/api/src/Etemplate/Widget/Textbox.php index fe8e836671..529820d41c 100644 --- a/api/src/Etemplate/Widget/Textbox.php +++ b/api/src/Etemplate/Widget/Textbox.php @@ -179,4 +179,4 @@ class Textbox extends Etemplate\Widget } } } -Etemplate\Widget::registerWidget(__NAMESPACE__.'\\Textbox', array('textbox','text','int','integer','float','hidden','colorpicker','hidden')); +Etemplate\Widget::registerWidget(__NAMESPACE__.'\\Textbox', array('et2-textbox','textbox','text','int','integer','float','hidden','colorpicker','hidden')); diff --git a/infolog/templates/default/edit.xet b/infolog/templates/default/edit.xet index 1d1d990a08..44e86bad75 100644 --- a/infolog/templates/default/edit.xet +++ b/infolog/templates/default/edit.xet @@ -154,7 +154,7 @@ - + diff --git a/package.json b/package.json index 1f6faf2860..fe2c5acd74 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "dependencies": { "@lion/button": "^0.14.1", "@lion/core": "^0.18.1", + "@lion/input": "^0.15.3", "carbon-components": "^10.37.0", "carbon-web-components": "^1.14.1", "lit-element": "^2.5.1",