@doyosi/laraisy 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@doyosi/laraisy",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "type": "module",
     "description": "Missing Laravel / Tailwind v4.1 & Daisy UI 5.1.14 Javascript Plugins",
     "main": "src/index.js",

package/src/DSSvgFetch.js

@@ -1,70 +1,70 @@
-/**
- * DSSvgFetch
- * Fetches SVG files and injects them inline.
- * Replaces <svg> classes with those defined in data-class.
- */
-export default class DSSvgFetch {
-    constructor(options = {}) {
-        this.config = {
-            selector: '.icon-fetch-web',
-            attribute: 'data-svg',
-            classAttribute: 'data-class', // New config for the class data
-            ...options
-        };
-
-        this.svgCache = new Map();
-    }
-
-    init() {
-        const elements = document.querySelectorAll(this.config.selector);
-
-        elements.forEach(element => {
-            if (element.dataset.svgProcessed) return;
-            this.processElement(element);
-        });
-    }
-
-    async processElement(element) {
-        const url = element.getAttribute(this.config.attribute);
-        const customClasses = element.getAttribute(this.config.classAttribute);
-
-        if (!url) return;
-
-        try {
-            element.dataset.svgProcessed = 'true';
-
-            // 1. Fetch content (or get from cache)
-            const svgContent = await this.fetchSvg(url);
-
-            // 2. Inject HTML
-            element.innerHTML = svgContent;
-
-            // 3. Apply custom classes if data-class exists
-            if (customClasses) {
-                const svg = element.querySelector('svg');
-                if (svg) {
-                    // setAttribute overwrites the entire 'class' attribute, 
-                    // effectively removing old classes and adding the new ones.
-                    svg.setAttribute('class', customClasses);
-                }
-            }
-
-        } catch (error) {
-            console.error(`DSSvgFetch: Failed to load ${url}`, error);
-            delete element.dataset.svgProcessed;
-        }
-    }
-
-    async fetchSvg(url) {
-        if (this.svgCache.has(url)) {
-            return this.svgCache.get(url);
-        }
-
-        const response = await fetch(url);
-        if (!response.ok) throw new Error(`HTTP ${response.status}`);
-
-        const text = await response.text();
-        this.svgCache.set(url, text);
-        return text;
-    }
+/**
+ * DSSvgFetch
+ * Fetches SVG files and injects them inline.
+ * Replaces <svg> classes with those defined in data-class.
+ */
+export class DSSvgFetch {
+    constructor(options = {}) {
+        this.config = {
+            selector: '.icon-fetch-web',
+            attribute: 'data-svg',
+            classAttribute: 'data-class', // New config for the class data
+            ...options
+        };
+
+        this.svgCache = new Map();
+    }
+
+    init() {
+        const elements = document.querySelectorAll(this.config.selector);
+
+        elements.forEach(element => {
+            if (element.dataset.svgProcessed) return;
+            this.processElement(element);
+        });
+    }
+
+    async processElement(element) {
+        const url = element.getAttribute(this.config.attribute);
+        const customClasses = element.getAttribute(this.config.classAttribute);
+
+        if (!url) return;
+
+        try {
+            element.dataset.svgProcessed = 'true';
+
+            // 1. Fetch content (or get from cache)
+            const svgContent = await this.fetchSvg(url);
+
+            // 2. Inject HTML
+            element.innerHTML = svgContent;
+
+            // 3. Apply custom classes if data-class exists
+            if (customClasses) {
+                const svg = element.querySelector('svg');
+                if (svg) {
+                    // setAttribute overwrites the entire 'class' attribute, 
+                    // effectively removing old classes and adding the new ones.
+                    svg.setAttribute('class', customClasses);
+                }
+            }
+
+        } catch (error) {
+            console.error(`DSSvgFetch: Failed to load ${url}`, error);
+            delete element.dataset.svgProcessed;
+        }
+    }
+
+    async fetchSvg(url) {
+        if (this.svgCache.has(url)) {
+            return this.svgCache.get(url);
+        }
+
+        const response = await fetch(url);
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+        const text = await response.text();
+        this.svgCache.set(url, text);
+        return text;
+    }
 }

package/src/DSTabs.js

@@ -139,24 +139,33 @@ export class DSTabs {
     }
 
     _cacheElements() {
-        // Find all buttons with data-tab attribute within the container
+        // 1. Find Buttons (always in main container)
         this.buttons = Array.from(this.container.querySelectorAll(this.cfg.buttonSelector));
 
-        // Find the tabs container
-        this.tabsContainer = this.container.querySelector(this.cfg.tabsContainer);
-
-        // Find all radio inputs and content pairs within the tabs container
-        if (this.tabsContainer) {
-            this.radios = Array.from(this.tabsContainer.querySelectorAll(this.cfg.radioSelector));
-            this.contents = Array.from(this.tabsContainer.querySelectorAll(this.cfg.contentSelector));
+        // 2. Determine Scope for Content/Radios
+        // If tabsContainer is configured AND exists, strictly scope to it. 
+        // Otherwise, search within the entire main container (flexible mode).
+        let searchScope = this.container;
+        if (this.cfg.tabsContainer) {
+            const scopedEl = this.container.querySelector(this.cfg.tabsContainer);
+            if (scopedEl) {
+                this.tabsContainer = scopedEl;
+                searchScope = scopedEl;
+            } else {
+                this.tabsContainer = null;
+            }
         } else {
-            this.radios = [];
-            this.contents = [];
+            this.tabsContainer = null;
         }
 
-        // Build a map of tab name -> { button, radio, content }
+        // 3. Find Radios and Content within that scope
+        this.radios = Array.from(searchScope.querySelectorAll(this.cfg.radioSelector));
+        this.contents = Array.from(searchScope.querySelectorAll(this.cfg.contentSelector));
+
+        // 4. Initialize Map
         this._tabMap = new Map();
 
+        // Group buttons by tab name
         this.buttons.forEach(button => {
             const tabName = button.dataset.tab;
             if (!this._tabMap.has(tabName)) {
@@ -165,15 +174,35 @@ export class DSTabs {
             this._tabMap.get(tabName).buttons.push(button);
         });
 
-        // Associate radios with their following content divs
-        this.radios.forEach((radio, index) => {
+        // Associate Radios (by data-tab)
+        this.radios.forEach(radio => {
             const tabName = radio.dataset.tab;
             if (this._tabMap.has(tabName)) {
                 this._tabMap.get(tabName).radio = radio;
-                // The content div follows the radio input
-                if (this.contents[index]) {
-                    this._tabMap.get(tabName).content = this.contents[index];
-                }
+            }
+        });
+
+        // Associate Content (Improved Logic)
+        // Strategy: Match by data-tab first. If content lacks data-tab, fall back to index/order.
+        const unmappedContents = [...this.contents]; // Copy to track what's used
+
+        // Pass 1: Link content elements that explicitly have data-tab="..."
+        this._tabMap.forEach((data, name) => {
+            const matchIndex = unmappedContents.findIndex(c => c.dataset.tab === name);
+            if (matchIndex > -1) {
+                data.content = unmappedContents[matchIndex];
+                unmappedContents[matchIndex] = null; // Mark as used
+            }
+        });
+
+        // Pass 2: Link remaining content to remaining tabs by order (legacy support)
+        let remainingIndex = 0;
+        const remainingContents = unmappedContents.filter(c => c !== null);
+
+        this._tabMap.forEach((data) => {
+            if (!data.content && remainingContents[remainingIndex]) {
+                data.content = remainingContents[remainingIndex];
+                remainingIndex++;
             }
         });
     }