Skip to content
Snippets Groups Projects
Verified Commit 70e8a55b authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

feat(tabs): add auto open feature #273

parent 170461f0
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
development/config/import.mjs
+ 1
− 1
View file @ 70e8a55b
export const projectRoot = "/home/vs/workspaces/oss/monster/monster";
export const sourcePath = "/home/vs/workspaces/oss/monster/monster/source";
export const developmentPath = "/home/vs/workspaces/oss/monster/monster/development";
export const pnpxBin = "/nix/store/z8s3r4vwf4r26g2d7shnw5lva6ihim8f-pnpm-9.15.0/bin/pnpx";
export const pnpxBin = "/nix/store/6fbs7524azbhk59lc7mfmvjmzsi0l4dx-pnpm-9.15.1/bin/pnpx";
export const nodeBin = "/nix/store/hnkyz55vndmvwhg6nzpliv86gh6sxg7h-nodejs-22.10.0/bin/node";
export const license = "/**" + "\n" +
" * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved." + "\n" +
......
development/issues/closed/273.html 0 → 100644
+ 26
− 0
View file @ 70e8a55b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>open the first tab if no active defined #273</title>
<script src="273.mjs" type="module"></script>
</head>
<body>
<h1>open the first tab if no active defined #273</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/273">Issue #273</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-tabs>
<monster-tab>Tab 1</monster-tab>
<monster-tab>Tab 2</monster-tab>
<monster-tab>Tab 3</monster-tab>
</monster-tabs>
</main>
</body>
</html>
development/issues/closed/273.mjs 0 → 100644
+ 15
− 0
View file @ 70e8a55b
/**
* @file development/issues/open/273.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/273
* @description open the first tab if no active defined
* @issue 273
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/layout/tabs.mjs";
source/components/datatable/dataset.mjs
+ 325
− 316
View file @ 70e8a55b
......@@ -291,23 +291,32 @@ function initEventHandler() {
if (this[datasourceLinkedElementSymbol]) {
this[datasourceLinkedElementSymbol].datasource.attachObserver(
new Observer(() => {
const page = this[datasourceLinkedElementSymbol]?.currentPage();
let index = 0;
if (typeof this[datasourceLinkedElementSymbol]?.currentPage === "function") {
const page = this[datasourceLinkedElementSymbol].currentPage();
if (page !== null && page !== undefined && page !== "") {
const index = parseInt(page, 10) - 1;
index = parseInt(page, 10) - 1;
}
}
this.setOption("mapping.index", index);
handleDataSourceChanges.call(this);
}
}),
);
this[datasourceLinkedElementSymbol].attachObserver(
new Observer(() => {
const page = this[datasourceLinkedElementSymbol]?.currentPage();
let index = 0;
if (typeof this[datasourceLinkedElementSymbol]?.currentPage === "function") {
const page = this[datasourceLinkedElementSymbol].currentPage();
if (page !== null && page !== undefined && page !== "") {
const index = parseInt(page, 10) - 1;
index = parseInt(page, 10) - 1;
}
}
this.setOption("mapping.index", index);
handleDataSourceChanges.call(this);
}
}),
);
......
source/components/datatable/util.mjs
+ 2
− 1
View file @ 70e8a55b
......@@ -29,6 +29,7 @@ const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
* @private
*/
function handleDataSourceChanges() {
if (!this[datasourceLinkedElementSymbol]) {
return;
}
......
source/components/layout/tabs.mjs
+ 13
− 0
View file @ 70e8a55b
......@@ -151,6 +151,7 @@ const resizeObserverSymbol = Symbol("resizeObserver");
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/268.html
* @issue https://localhost.alvine.dev:8443/development/issues/closed/271.html
* @issue https://localhost.alvine.dev:8443/development/issues/closed/273.html
*
* @since 3.74.0
* @copyright schukai GmbH
......@@ -178,6 +179,7 @@ class Tabs extends CustomElement {
* @property {Object} features
* @property {number} features.openDelay=500 Open delay in milliseconds
* @property {string} features.removeBehavior="auto" Remove behavior, auto (default), next, previous and none
* @property {boolean} features.openFirst=true Open the first tab
* @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* @property {String} fetch.redirect=error
* @property {String} fetch.method=GET
......@@ -213,6 +215,7 @@ class Tabs extends CustomElement {
features: {
openDelay: null,
removeBehavior: "auto",
openFirst: true,
},
classes: {
......@@ -918,6 +921,16 @@ function initTabButtons() {
this.setOption("marker", random());
return adjustButtonVisibility.call(this).then(() => {
if (!activeReference&& this.getOption("features.openFirst") === true) {
const firstButton = this.getOption("buttons.standard").find(
(button) => button.disabled !== true,
);
if (firstButton) {
activeReference = firstButton.reference;
}
}
if (activeReference) {
return new Processing(() => {
const button = this.shadowRoot.querySelector(
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment