feat: new methods and tidy #174 #173

playground/tab/index.html

@@ -22,8 +22,8 @@
             data-monster-option-classes-button="monster-theme-secondary-1"
             data-monster-option-classes-popper="monster-theme-secondary-1"
     >
-        <div>Tab 1</div>
-        <div>Tab 2</div>
+        <div data-monster-name="tab1">Tab 1</div>
+        <div data-monster-name="tab2">Tab 2</div>
         <div>Tab 3</div>
         <div>Tab 4</div>
         <div>Tab 5</div>

source/components/events.mjs

+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+
+
+/**
+ * content fetched event
+ *
+ * @memberOf Monster.Components
+ * @event event:monster-fetched
+ * @type {object}
+ * @property {string} url loaded uri
+ */
\ No newline at end of file

source/components/form/button-bar.mjs

@@ -148,7 +148,7 @@ const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Form
  * @summary A configurable tab control
- * @fires Monster.Components.Form.event:monster-fetched
+ * @fires Monster.Components.event:monster-fetched
  */
 class ButtonBar extends CustomElement {
 	/**

source/components/form/events.mjs

@@ -66,15 +66,6 @@
  * @property {boolean} [checked] if it is a boolean value
  **/
 
-/**
- * content fetched event
- *
- * @memberOf Monster.Components.Form
- * @event event:monster-fetched
- * @type {object}
- * @property {string} url loaded uri
- */
-
 /**
  * button clicked event
  *

source/components/form/reload.mjs

@@ -95,7 +95,7 @@ const intersectionObserverWasInitialized = Symbol("wasInitialized");
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Form
  * @summary A reload control
- * @fires Monster.Components.Form.event:monster-fetched
+ * @fires Monster.Components.event:monster-fetched
  */
 class Reload extends CustomElement {
 	/**
@@ -188,7 +188,7 @@ class Reload extends CustomElement {
 	 * @throws {Error} request failed
 	 * @throws {Error} not found
 	 * @throws {Error} undefined status or type
-	 * @fires Monster.Components.Form.event:monster-fetched
+	 * @fires Monster.Components.event:monster-fetched
 	 * @return {Monster.Components.Form.Form}
 	 */
 	[assembleMethodSymbol]() {
@@ -257,7 +257,7 @@ function initOptionsFromArguments() {
  * @throws {Error} request failed
  * @throws {Error} not found
  * @throws {Error} undefined status or type
- * @fires Monster.Components.Form.event:monster-fetched
+ * @fires Monster.Components.event:monster-fetched
  */
 function initIntersectionObserver() {
 	if (this[intersectionObserverWasInitialized] === true) {
@@ -306,7 +306,7 @@ function initIntersectionObserver() {
  * @throws {Error} undefined status or type
  * @throws {TypeError} value is not an instance of
  * @throws {TypeError} value is not a string
- * @fires Monster.Components.Form.event:monster-fetched
+ * @fires Monster.Components.event:monster-fetched
  * @return {Promise}
  */
 function loadContent() {

source/components/form/shadow-reload.mjs

@@ -77,7 +77,7 @@ export { ShadowReload };
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Form
  * @summary A shadow reload control
- * @fires Monster.Components.Form.event:monster-fetched
+ * @fires Monster.Components.event:monster-fetched
  */
 class ShadowReload extends Reload {
 	/**

source/components/form/tabs.mjs

@@ -45,7 +45,7 @@ export { Tabs };
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Form
  * @summary A configurable tab control
- * @fires Monster.Components.Form.event:monster-fetched
+ * @fires Monster.Components.event:monster-fetched
  * @deprecated since 3.59.0 use {@link Monster.Components.Layout.Tabs}
  */
 class Tabs extends NewTabs {

source/components/form/template.mjs

@@ -64,7 +64,7 @@ const intersectionObserverWasInitialized = Symbol("wasInitialized");
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Form
  * @summary A template control
- * @fires Monster.Components.Form.event:monster-fetched
+ * @fires Monster.Components.event:monster-fetched
  */
 class Template extends CustomElement {
 	/**
@@ -155,7 +155,7 @@ class Template extends CustomElement {
 	 * @throws {Error} request failed
 	 * @throws {Error} not found
 	 * @throws {Error} undefined status or type
-	 * @fires Monster.Components.Form.event:monster-fetched
+	 * @fires Monster.Components.event:monster-fetched
 	 * @return {Monster.Components.Form.Form}
 	 */
 	[assembleMethodSymbol]() {
@@ -241,7 +241,7 @@ function initOptionsFromArguments() {
  * @throws {Error} request failed
  * @throws {Error} not found
  * @throws {Error} undefined status or type
- * @fires Monster.Components.Form.event:monster-fetched
+ * @fires Monster.Components.event:monster-fetched
  */
 function initIntersectionObserver() {
 	if (this[intersectionObserverWasInitialized] === true) {
@@ -287,7 +287,7 @@ function initIntersectionObserver() {
  * @throws {Error} undefined status or type
  * @throws {TypeError} value is not an instance of
  * @throws {TypeError} value is not a string
- * @fires Monster.Components.Form.event:monster-fetched
+ * @fires Monster.Components.event:monster-fetched
  */
 function loadContent() {
 	if (!this.shadowRoot) {

source/components/layout/events.mjs

@@ -14,3 +14,17 @@
  * @property {Object} control control
  * @property {string} details[].dimension
  */
+
+/**
+ * This event is fired when a tab is changed.
+ *
+ * @memberOf Monster.Components.Layout
+ * @event event:monster-tab-changed
+ */
+
+/**
+ * This event is fired when a tab is changed.
+ *
+ * @memberOf Monster.Components.Layout
+ * @event event:monster-tab-remove
+ */

source/components/layout/style/tabs.pcss

@@ -8,7 +8,6 @@
 @import '../../style/mixin/typography.pcss';
 @import '../../style/mixin/hover.pcss';
 
-
 [data-monster-role=nav] button.hidden {
     display: none;
 }
@@ -27,6 +26,10 @@ nav[data-monster-role=nav] {
     border-bottom-style: var(--monster-border-style);
     box-shadow: var(--monster-box-shadow-1);
     border-color: var(--monster-bg-color-primary-2);
+
+    color: var(--monster-color-gray-6);
+    background-color: var(--monster-color-gray-1);    
+    
 }
 
 [data-monster-role=nav] button .remove-tab {
@@ -49,6 +52,7 @@ nav[data-monster-role=nav] {
     font-size: 1rem;
     line-height: 1.4;
     font-weight: normal;
+
 }
 
 [data-monster-role=nav] button {

source/components/layout/tabs.mjs

@@ -168,7 +168,9 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Layout
  * @summary A configurable tab control
- * @fires Monster.Components.Layout.event:monster-fetched
+ * @fires Monster.Components.event:monster-fetched
+ * @fires Monster.Components.Layout.event:monster-tab-changed
+ * @fires Monster.Components.Layout.event:monster-tab-remove
  */
 class Tabs extends CustomElement {
 	/**
@@ -285,6 +287,58 @@ class Tabs extends CustomElement {
 		return "monster-tabs";
 	}
 
+	/**
+	 * A function that activates a tab based on the provided name.
+	 * 
+	 * The tabs have to be named with the `data-monster-name` attribute.
+	 *
+	 * @param {type} idOrName - the name or id of the tab to activate
+	 * @return {Tabs} - The current instance
+	 */
+	activeTab(idOrName) {
+		
+		let found = false;
+		
+		getSlottedElements.call(this).forEach((node) => {
+			if (found === true) {
+				return
+			}
+			
+			if (node.getAttribute("data-monster-name") === idOrName) {
+				this.shadowRoot.querySelector(`[data-monster-tab-reference="${node.getAttribute("id")}"]`).click();
+				found = true;
+			}
+			
+			if (node.getAttribute("id") === idOrName) {
+				this.shadowRoot.querySelector(`[data-monster-tab-reference="${node.getAttribute("id")}"]`).click();
+				found = true;
+			}
+		})
+		
+		return this
+	}
+
+	/**
+	 * A function that returns the name or id of the currently active tab.
+	 * 
+	 * The tabs have to be named with the `data-monster-name` attribute.
+	 * 
+	 * @returns {string|null}
+	 */
+	getActiveTab() {
+		const nodes = getSlottedElements.call(this);
+		for (const node of nodes) {
+			if (node.matches(".active") === true) {
+				if (node.hasAttribute("data-monster-name")) {
+					return node.getAttribute("data-monster-name");
+				} 
+				
+				return node.getAttribute("id");
+			}
+		}
+		return null;
+	}
+
 	/**
 	 * This method is called by the dom and should not be called directly.
 	 *