spb/ka-ui

1/* KA Tabbar v1 — canonique ka-ui.git/nav/ka-tabbar.js2   Version vanilla (sites sans React : sorti-ka, api-ka, ka-stats…).3   Requiert ka-tabbar.css dans la page. Usage :45     const bar = KaTabbar.mount({6       theme: "light" | "dark",7       accent: "#d6336c",                       // couleur signature8       tabs: [9         { key: "decouvrir", label: "Découvrir", icon: "compass", href: "/" },10         { key: "recherche", label: "Recherche", icon: "search", onPress: () => {…} },11       ],12     });13     bar.setActive("decouvrir");                // pilotage par le routeur du site1415   Les <a> reçoivent data-nav pour être interceptés par les routeurs SPA16   maison qui délèguent sur [data-nav]. */17(function () {18  "use strict";1920  var ICONS = {21    compass: '<circle cx="12" cy="12" r="9"/><path d="m15.5 8.5-2.2 5-4.8 2 2.2-5 4.8-2z"/>',22    search: '<circle cx="11" cy="11" r="7"/><path d="m20.5 20.5-4.2-4.2"/>',23    heart: '<path d="M12 20.5S4.5 15.8 2.6 11.4A5.3 5.3 0 0 1 12 6.6a5.3 5.3 0 0 1 9.4 4.8C19.5 15.8 12 20.5 12 20.5z"/>',24    user: '<circle cx="12" cy="8.2" r="3.7"/><path d="M4.5 20.2a7.5 7.5 0 0 1 15 0"/>',25    map: '<path d="M9 4 3.5 6v14L9 18l6 2 5.5-2V4L15 6 9 4z"/><path d="M9 4v14M15 6v14"/>',26    pin: '<path d="M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11z"/><circle cx="12" cy="10" r="2.6"/>',27    tag: '<path d="M20.6 13.4 12 22 2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z"/><circle cx="7" cy="7" r="1.6"/>',28    home: '<path d="m3.5 10.5 8.5-7 8.5 7"/><path d="M5.5 9v11h13V9"/>',29    grid: '<rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/>',30    store: '<path d="M4.5 9.5 6 4.5h12l1.5 5"/><path d="M5 9.5h14V20H5V9.5z"/><path d="M10 20v-5h4v5"/>',31    basket: '<path d="M4 9h16l-1.6 10a2 2 0 0 1-2 1.7H7.6a2 2 0 0 1-2-1.7L4 9z"/><path d="M8.5 9 12 3l3.5 6"/>',32    target: '<circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r="0.8"/>',33    trendup: '<path d="m3.5 16.5 5.5-5.5 3.5 3.5 7.5-7.5"/><path d="M14.5 7H20v5.5"/>',34    receipt: '<path d="M6 3.5h12V21l-2-1.4-2 1.4-2-1.4-2 1.4-2-1.4L6 21V3.5z"/><path d="M9 8h6M9 11.5h6M9 15h4"/>',35    book: '<path d="M12 6.5C10.5 5 8.5 4.5 5.5 4.5H3.5V19h2c3 0 5 .5 6.5 2 1.5-1.5 3.5-2 6.5-2h2V4.5h-2c-3 0-5 .5-6.5 2z"/><path d="M12 6.5V21"/>',36    chart: '<path d="M4 20h16"/><path d="M7.5 20v-6M12 20V9M16.5 20v-4"/>',37    calendar: '<rect x="3.5" y="5" width="17" height="15.5" rx="2"/><path d="M8 3v4M16 3v4M3.5 10h17"/>',38  };3940  function svg(name) {41    return (42      '<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"' +43      ' stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +44      (ICONS[name] || "") +45      "</svg>"46    );47  }4849  window.KaTabbar = {50    mount: function (cfg) {51      var nav = document.createElement("nav");52      nav.className = "ka-tabbar" + (cfg.theme === "dark" ? " ka-tabbar--dark" : "");53      nav.setAttribute("aria-label", "Navigation mobile");54      if (cfg.accent) nav.style.setProperty("--ktb-accent", cfg.accent);55      (cfg.tabs || []).forEach(function (t) {56        var el;57        if (t.onPress) {58          el = document.createElement("button");59          el.type = "button";60          el.addEventListener("click", t.onPress);61        } else {62          el = document.createElement("a");63          el.href = t.href || "#";64          el.setAttribute("data-nav", "");65        }66        el.dataset.tab = t.key || t.label;67        el.innerHTML = svg(t.icon) + t.label;68        nav.appendChild(el);69      });70      document.body.appendChild(nav);71      return {72        el: nav,73        setActive: function (key) {74          nav.querySelectorAll("a,button").forEach(function (b) {75            b.classList.toggle("active", b.dataset.tab === key);76          });77        },78      };79    },80  };81})();82