@inizioevoke/astro-core 2.0.4 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "2.0.4",
+  "version": "2.1.1",
   "description": "",
   "license": "ISC",
   "author": "",

package/src/components/ScrollContainer/ScrollContainer.ts

@@ -170,6 +170,30 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
     this.#updateThumbSize();
   }
 
+  addEventListener(type: keyof HTMLElementEventMap, listener: (this: EvoScrollContainerElement, ev: any) => void, options?: boolean | AddEventListenerOptions) {
+    switch (type) {
+      case 'scroll':
+      case 'scrollend':
+        this.#content.addEventListener(type, listener, options);
+        break;
+      default:
+        super.addEventListener(type, listener, options);
+        break;
+    }
+  }
+
+  removeEventListener(type: keyof HTMLElementEventMap, listener: (this: EvoScrollContainerElement, ev: any) => void) {
+    switch (type) {
+      case 'scroll':
+      case 'scrollend':
+        this.#content.removeEventListener(type, listener);
+        break;
+      default:
+        super.removeEventListener(type, listener);
+        break;
+    }
+  }
+
   #updateThumbSize() {
     if (this.#thumbVert && this.#trackVert) {
       const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);

package/src/components/Tabs/Tabs.astro

@@ -75,10 +75,17 @@ const tabHtml = tabs.map((tab) => {
   tab.class && cssClass.push(tab.class);
   tab.active && cssClass.push('evo-tab-active');
 
+  const attrs: string[] = [];
+  Object.keys(tab)
+    .filter(key => !['class','active','title','index'].includes(key))
+    .forEach((key) => {
+      attrs.push(`${key}="${tab[key as keyof typeof tab].replace(/"/g, '')}"`)
+    });
+
   if (listType === 'none') {
-    return `<button class="${cssClass.join(' ')}" data-tab="${tab.index}" role="tab">${tab.title}</button>`;
+    return `<button class="${cssClass.join(' ')}" data-tab="${tab.index}" role="tab" ${attrs.join(' ')}>${tab.title}</button>`;
   } else {
-    return `<li class="${cssClass.join(' ')}"><button data-tab="${tab.index}" role="tab">${tab.title}</button></li>`;
+    return `<li class="${cssClass.join(' ')}"><button data-tab="${tab.index}" role="tab" ${attrs.join(' ')}>${tab.title}</button></li>`;
   }
 }).join('');
 ---