extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-03 12:39:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

change tabbox to be an input widget allowing to get and set the active tab

Browse Source
This commit is contained in:
ralf 2022-08-05 17:37:11 +02:00
parent 59ff16f98b
commit b22674dbd7
1 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
api/js/etemplate/Layout/Et2Tabs/Et2Tabs.ts
View File

@ -8,15 +8,16 @@
* @author Nathan Gray * @author Nathan Gray
*/ */
import {SlTab, SlTabGroup, SlTabPanel} from "@shoelace-style/shoelace"; import {SlTab, SlTabGroup, SlTabPanel} from "@shoelace-style/shoelace";
import {Et2Widget, loadWebComponent} from "../../Et2Widget/Et2Widget"; import {loadWebComponent} from "../../Et2Widget/Et2Widget";
import {et2_directChildrenByTagName, et2_filteredNodeIterator, et2_readAttrWithDefault} from "../../et2_core_xml"; import {et2_directChildrenByTagName, et2_filteredNodeIterator, et2_readAttrWithDefault} from "../../et2_core_xml";
import {css, PropertyValues} from "@lion/core"; import {css, PropertyValues} from "@lion/core";
import shoelace from "../../Styles/shoelace"; import shoelace from "../../Styles/shoelace";
import {et2_createWidget} from "../../et2_core_widget"; import {et2_createWidget} from "../../et2_core_widget";
import {colorsDefStyles} from "../../Styles/colorsDefStyles"; import {colorsDefStyles} from "../../Styles/colorsDefStyles";
import {Et2InputWidget} from "../../Et2InputWidget/Et2InputWidget";
export class Et2Tabs extends Et2Widget(SlTabGroup) export class Et2Tabs extends Et2InputWidget(SlTabGroup)
{ {
static get styles() static get styles()
{ {
@ -78,7 +79,12 @@ export class Et2Tabs extends Et2Widget(SlTabGroup)
* @deprecated use "placement" instead * @deprecated use "placement" instead
* @see https://shoelace.style/components/tab-group * @see https://shoelace.style/components/tab-group
*/ */
alignTabs: {type: String} alignTabs: {type: String},
/**
* active tab is the value
*/
value: {type: String}
} }
} }
@ -99,6 +105,41 @@ export class Et2Tabs extends Et2Widget(SlTabGroup)
this.addTabs = false; this.addTabs = false;
} }
get value()
{
return this.getActiveTab()?.panel;
}
set value(tab)
{
if (this.tabs && Array.isArray(this.tabs) && this.tabs.length)
{
this.show(this.__value = tab);
}
else
{
this.__value = tab;
}
}
connectedCallback()
{
super.connectedCallback();
this.updateComplete.then(() =>
{
if (this.__value)
{
this.show(this.__value);
}
});
}
isDirty(): boolean
{
return false;
}
loadFromXML(_node) loadFromXML(_node)
{ {
// Get the tabs and tabpanels tags // Get the tabs and tabpanels tags