@birdycom/omniaui 0.12.1 → 0.12.3

package/README.md

@@ -15,7 +15,8 @@ Plus buttons, cards, badges, alerts, forms, avatar, progress, breadcrumb, pagina
 
 ```bash
 npm install @birdycom/omniaui      # import "@birdycom/omniaui"
-npx omniacss add component modal      # copy a snippet into your project
+npx omniaui add modal              # copy a component into your project (HTML, React, Vue or Blade)
+npx omniaui copy-js                # the scripts (data table, carousel) to public/js/oc-*.js
 ```
 
 MIT

package/bin/lib/copy-js.mjs

@@ -0,0 +1,56 @@
+// File: packages/ui/bin/lib/copy-js.mjs
+// `omniaui copy-js`: copy the scripts of the installed OmniaUI packages into the project's public folder as
+// oc-<name>.js, the name that makes them start on their own from a plain <script type="module"> tag.
+// Map: scripts per package -> installed ones -> target folder (Laravel/Vite: public/js) -> copy (--force, --dry-run) -> script tags
+
+import fs from "node:fs/promises";
+import path from "node:path";
+import { cwd, exists, pkgDir, posix } from "./project.mjs";
+
+/** [package, file in the package, name in the project, what it does]. */
+const SCRIPTS = [
+  ["@birdycom/omniaui", "dist/data-table.js", "oc-data-table.js", "list table: sort, filter, select, paginate"],
+  ["@birdycom/omniaui", "dist/carousel.js", "oc-carousel.js", "looping carousel (.oc-carousel--loop)"],
+  ["@birdycom/omniaui-pro", "dist/spotlight.js", "oc-spotlight.js", "spotlight cards (Pro)"],
+  ["@birdycom/omniaui-pro", "dist/ecosystem-map.js", "oc-ecosystem-map.js", "ecosystem map lines (Pro)"],
+  ["@birdycom/omniaui-pro", "dist/infinite-carousel.js", "oc-infinite-carousel.js", "infinite carousel (Pro)"],
+];
+
+/** public/js when the project has a public folder (Laravel, Vite, Astro …), else js. */
+async function defaultJsDir() {
+  return (await exists(path.join(cwd, "public"))) ? "public/js" : "js";
+}
+
+export async function cmdCopyJs(names, flags) {
+  const dir = path.resolve(cwd, flags.to || flags.dir || (await defaultJsDir()));
+  const wanted = names.map((n) => n.replace(/^oc-|\.js$/g, ""));
+  const picked = SCRIPTS.filter(([, , target]) => !wanted.length || wanted.includes(target.replace(/^oc-|\.js$/g, "")));
+  if (wanted.length && picked.length !== wanted.length) {
+    const known = SCRIPTS.map(([, , t]) => t.replace(/^oc-|\.js$/g, ""));
+    throw new Error(`unknown script: ${wanted.filter((w) => !known.includes(w)).join(", ")} (known: ${known.join(", ")})`);
+  }
+
+  const copied = [];
+  for (const [pkg, file, target, what] of picked) {
+    let from;
+    try { from = path.join(pkgDir(pkg), file); } catch { if (wanted.length) console.log(`skip ${target}: ${pkg} is not installed`); continue; }
+    if (!(await exists(from))) continue;
+    const to = path.join(dir, target);
+    const rel = posix(path.relative(cwd, to));
+    if ((await exists(to)) && !flags.force && !flags["dry-run"]) { console.log(`skip ${rel} (exists, use --force)`); continue; }
+    if (!flags["dry-run"]) {
+      await fs.mkdir(dir, { recursive: true });
+      await fs.copyFile(from, to);
+    }
+    console.log(`${flags["dry-run"] ? "would copy" : "copied"} ${rel}  (${what})`);
+    copied.push(target);
+  }
+  if (!copied.length) {
+    console.log("No scripts copied. They come with @birdycom/omniaui and @birdycom/omniaui-pro: install those first.");
+    return;
+  }
+  // The URL the page uses: the folder under public/ is served from the site root.
+  const base = "/" + posix(path.relative(path.join(cwd, "public"), dir)).replace(/^(\.\.\/)+/, "");
+  console.log(`\nLoad the ones a page needs; each starts on its own:`);
+  for (const target of copied) console.log(`  <script type="module" src="${base}/${target}"></script>`);
+}

package/bin/omniaui.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 // File: packages/ui/bin/omniaui.mjs
 // OmniaUI CLI — copy components and blocks into your project (css | vue | react | blade), list the registry.
-// Map: args -> commands (add | list | help | version) -> lib/add.mjs (lib/catalog.mjs, lib/project.mjs)
+// Map: args -> commands (add | list | copy-js | help | version) -> lib/add.mjs (lib/catalog.mjs, lib/project.mjs), lib/copy-js.mjs
 // Author: Serge Cools | Framework: OmniaUI (on OmniaCSS)
 //
 // These commands used to be "omniacss add/list" (moved here in October 2026). The CSS build stays in
@@ -9,6 +9,7 @@
 
 import { parseArgs } from "node:util";
 import { cmdAdd, cmdList } from "./lib/add.mjs";
+import { cmdCopyJs } from "./lib/copy-js.mjs";
 import { readJson } from "./lib/project.mjs";
 
 const HELP = `
@@ -18,6 +19,8 @@ OmniaUI CLI
                                         copy components/blocks into your project (you own the code)
   omniaui add <name...> -f vue --import  print the import line for the npm package instead
   omniaui list [blocks|components] [-f vue]  show what can be added in a flavour
+  omniaui copy-js [name...] [--to public/js]  copy the scripts (data table, carousel; Pro: spotlight, ecosystem map,
+                                        infinite carousel) as oc-<name>.js, which start on their own from a script tag
 
 Options:
   -f, --framework <fw>   css | vue | react | blade (default: "framework" in omnia.config.json, else detected
@@ -26,7 +29,7 @@ Options:
       --dir <dir>        target folder (alias --to); defaults per flavour:
                          vue/react: resources/js/components/oc (Laravel) or src/components/oc,
                          css: resources/views/oc-snippets (Laravel) or oc-snippets,
-                         blade: resources/views/components/oc
+                         blade: resources/views/components/oc; copy-js: public/js (or js)
       --all              add every component (or block with --kind block)
       --force            overwrite existing files
       --dry-run          show what would be copied
@@ -60,6 +63,7 @@ async function main() {
   switch (command) {
     case "add": return cmdAdd(rest, values);
     case "list": return cmdList(rest[0], values);
+    case "copy-js": return cmdCopyJs(rest, values);
     default: console.log(HELP);
   }
 }

package/dist/carousel.js

@@ -38,8 +38,17 @@ export function initCarousels(scope = document) {
   scope.querySelectorAll(".oc-carousel--loop").forEach((root) => bindCarousel(root));
 }
 
-// The docs site loads this file as /js/oc-carousel.js. A wrapper import must not scan the page.
-if (typeof document !== "undefined" && String(import.meta.url).includes("oc-carousel")) {
+// Starts on its own when loaded straight from a <script type="module"> tag: as /js/oc-carousel.js (the docs site,
+// `npx omniaui copy-js`), with ?auto in the URL, or with data-oc-auto on the tag. An import from a bundler or a
+// wrapper does not scan the page: call the init function yourself there.
+function autoStart() {
+  if (typeof document === "undefined") return false;
+  const url = String(import.meta.url);
+  if (url.includes("oc-carousel") || /[?&]auto(=|&|$)/.test(url)) return true;
+  const file = url.split(/[?#]/)[0];
+  return [...document.querySelectorAll("script[data-oc-auto][src]")].some((s) => s.src.split(/[?#]/)[0] === file);
+}
+if (autoStart()) {
   const boot = () => initCarousels(document);
   if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
   else boot();