@birdycom/omniaui 0.12.5 → 0.12.6

package/README.md

@@ -16,7 +16,7 @@ Plus buttons, cards, badges, alerts, forms, avatar, progress, breadcrumb, pagina
 ```bash
 npm install @birdycom/omniaui      # import "@birdycom/omniaui"
 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
+npx omniaui copy-js                # the scripts (data table, carousel, barcode, form extras) to public/js/oc-*.js
 ```
 
 MIT

package/bin/lib/copy-js.mjs

@@ -11,9 +11,16 @@ import { cwd, exists, pkgDir, posix } from "./project.mjs";
 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", "dist/barcode.js", "oc-barcode.js", "barcode SVG (.oc-barcode: EAN-13, EAN-8, UPC-A, Code 128)"],
+  ["@birdycom/omniaui", "dist/lazy.js", "oc-lazy.js", "lazy images: fade in over the placeholder (.oc-lazy)"],
+  ["@birdycom/omniaui", "dist/form-extras.js", "oc-form-extras.js", "ISO week in date fields, name card rename, avatar picker preview, quantity steps"],
   ["@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)"],
+  ["@birdycom/omniaui-pro", "dist/data-table-pro.js", "oc-data-table-pro.js", "data table column width and row drag (Pro)"],
+  ["@birdycom/omniaui-pro", "dist/product-picker.js", "oc-product-picker.js", "product picker dialog: search and pick (Pro)"],
+  ["@birdycom/omniaui-pro", "dist/shop.js", "oc-shop.js", "shop catalog filters and cart totals (Pro)"],
+  ["@birdycom/omniaui-pro", "dist/barcode-maker.js", "oc-barcode-maker.js", "barcode maker: live preview and SVG download (Pro, needs oc-barcode.js)"],
 ];
 
 /** public/js when the project has a public folder (Laravel, Vite, Astro …), else js. */
@@ -40,7 +47,9 @@ export async function cmdCopyJs(names, flags) {
     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);
+      // A Pro script that builds on a free one imports "@birdycom/omniaui/<name>.js": in the copy that is ./oc-<name>.js.
+      const code = await fs.readFile(from, "utf8");
+      await fs.writeFile(to, code.replace(/(["'])@birdycom\/omniaui\/([\w-]+)\.js\1/g, "$1./oc-$2.js$1"));
     }
     console.log(`${flags["dry-run"] ? "would copy" : "copied"} ${rel}  (${what})`);
     copied.push(target);

package/bin/omniaui.mjs

@@ -19,8 +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
+  omniaui copy-js [name...] [--to public/js]  copy the scripts (data table, carousel, barcode; Pro: spotlight, ecosystem map,
+                                        infinite carousel, barcode maker …) 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

package/dist/barcode.d.ts

@@ -0,0 +1,15 @@
+// File: packages/ui/src/barcode.d.ts
+// Types for the barcode script (EAN-13, EAN-8, UPC-A, Code 128 as SVG).
+
+export type BarcodeFormat = "auto" | "EAN13" | "EAN8" | "UPC" | "CODE128";
+export const CODE128: string[];
+export function guessFormat(value: string): Exclude<BarcodeFormat, "auto">;
+export function eanCheck(body: string): string;
+export function encodeEan(value: string, length: 8 | 13): { bits: string; text: string };
+export function code128Values(text: string): number[];
+export function encodeCode128(text: string): { bits: string; text: string };
+export function encodeBarcode(value: string, format?: BarcodeFormat | string): { bits: string; text: string };
+export function barsToSvg(bits: string, label?: string): string;
+export function barcodeFile(value: string, options?: { format?: BarcodeFormat | string; digits?: boolean; moduleWidth?: number; height?: number }): string;
+export function renderBarcode(el: HTMLElement): void;
+export function initBarcodes(scope?: ParentNode): void;

package/dist/barcode.js

@@ -0,0 +1,164 @@
+// File: packages/ui/src/barcode.js
+// Map: format guess -> EAN-13 / EAN-8 / UPC-A -> Code 128 (B, or C for even digit runs) -> bars to SVG -> SVG file -> bind -> boot
+// Barcode display without a dependency : <figure class="oc-barcode" data-value="5412345678908">
+// gets an SVG with the bars and the digits under it. data-format="auto|EAN13|EAN8|UPC|CODE128" (default auto).
+
+/** Module widths of the Code 128 symbols 0–105 (6 elements, 11 modules each) and the stop (7 elements, 13 modules). */
+export const CODE128 = [
+  "212222", "222122", "222221", "121223", "121322", "131222", "122213", "122312", "132212", "221213",
+  "221312", "231212", "112232", "122132", "122231", "113222", "123122", "123221", "223211", "221132",
+  "221231", "213212", "223112", "312131", "311222", "321122", "321221", "312212", "322112", "322211",
+  "212123", "212321", "232121", "111323", "131123", "131321", "112313", "132113", "132311", "211313",
+  "231113", "231311", "112133", "112331", "132131", "113123", "113321", "133121", "313121", "211331",
+  "231131", "213113", "213311", "213131", "311123", "311321", "331121", "312113", "312311", "332111",
+  "314111", "221411", "431111", "111224", "111422", "121124", "121421", "141122", "141221", "112214",
+  "112412", "122114", "122411", "142112", "142211", "241211", "221114", "413111", "241112", "134111",
+  "111242", "121142", "121241", "114212", "124112", "124211", "411212", "421112", "421211", "212141",
+  "214121", "412121", "111143", "111341", "131141", "114113", "114311", "411113", "411311", "113141",
+  "114131", "311141", "411131", "211412", "211214", "211232",
+];
+const STOP = "2331112";
+const START_B = 104;
+const START_C = 105;
+
+const L = ["0001101", "0011001", "0010011", "0111101", "0100011", "0110001", "0101111", "0111011", "0110111", "0001011"];
+const G = ["0100111", "0110011", "0011011", "0100001", "0011101", "0111001", "0000101", "0010001", "0001001", "0010111"];
+const R = L.map((code) => code.replace(/./g, (bit) => (bit === "1" ? "0" : "1")));
+const PARITY = ["LLLLLL", "LLGLGG", "LLGGLG", "LLGGGL", "LGLLGG", "LGGLLG", "LGGGLL", "LGLGLG", "LGLGGL", "LGGLGL"];
+
+/** EAN-13, EAN-8 or UPC-A for plain digit strings of that length (with or without the check digit); else Code 128. */
+export function guessFormat(value) {
+  if (/^\d{12,13}$/.test(value)) return "EAN13";
+  if (/^\d{7,8}$/.test(value)) return "EAN8";
+  if (/^\d{11}$/.test(value)) return "UPC";
+  return "CODE128";
+}
+
+/** Check digit of an EAN/UPC body: weights 3 and 1 from the right. */
+export function eanCheck(body) {
+  let sum = 0;
+  [...body].reverse().forEach((d, i) => { sum += Number(d) * (i % 2 === 0 ? 3 : 1); });
+  return String((10 - (sum % 10)) % 10);
+}
+
+/** Bars (a "1010…" module string) and the full digits for EAN-13 / EAN-8; throws on a wrong check digit. */
+export function encodeEan(value, length) {
+  const body = value.slice(0, length - 1);
+  const check = eanCheck(body);
+  if (value.length === length && value[length - 1] !== check) throw new Error(`check digit should be ${check}`);
+  const digits = body + check;
+  if (length === 8) {
+    const left = [...digits.slice(0, 4)].map((d) => L[d]).join("");
+    const right = [...digits.slice(4)].map((d) => R[d]).join("");
+    return { bits: `101${left}01010${right}101`, text: digits };
+  }
+  const parity = PARITY[digits[0]];
+  const left = [...digits.slice(1, 7)].map((d, i) => (parity[i] === "L" ? L : G)[d]).join("");
+  const right = [...digits.slice(7)].map((d) => R[d]).join("");
+  return { bits: `101${left}01010${right}101`, text: digits };
+}
+
+/** Code 128 symbol values for a text: code C for an all-digit text of even length (4+), else code B (ASCII 32–126). */
+export function code128Values(text) {
+  let values;
+  if (/^(\d\d){2,}$/.test(text)) {
+    values = [START_C, ...text.match(/\d\d/g).map(Number)];
+  } else {
+    if (/[^\x20-\x7e]/.test(text)) throw new Error("Code 128 B takes ASCII characters 32–126 only");
+    values = [START_B, ...[...text].map((ch) => ch.charCodeAt(0) - 32)];
+  }
+  const check = values.reduce((sum, v, i) => sum + v * (i === 0 ? 1 : i), 0) % 103;
+  return [...values, check];
+}
+
+/** Module string ("1" = bar) for Code 128. */
+export function encodeCode128(text) {
+  const widths = code128Values(text).map((v) => CODE128[v]).join("") + STOP;
+  let bits = "";
+  [...widths].forEach((w, i) => { bits += (i % 2 === 0 ? "1" : "0").repeat(Number(w)); });
+  return { bits, text };
+}
+
+/** Encode a value in a format (auto picks one). Returns the module string and the human-readable text. */
+export function encodeBarcode(value, format = "auto") {
+  const code = String(value ?? "").trim();
+  if (!code) throw new Error("empty value");
+  const kind = format === "auto" ? guessFormat(code) : format.toUpperCase();
+  if (kind === "EAN13") return encodeEan(code.padStart(code.length === 12 ? 12 : 13, "0"), 13);
+  if (kind === "UPC") return encodeEan(`0${code}`, 13);
+  if (kind === "EAN8") return encodeEan(code, 8);
+  return encodeCode128(code);
+}
+
+/** Text for HTML: the value can come from user input (Code 128 encodes < > & " too). */
+const escapeHtml = (text) => String(text).replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
+
+/** SVG markup of the bars, with a quiet zone of 10 modules on both sides. Bars use currentColor. */
+export function barsToSvg(bits, label = "") {
+  const quiet = 10;
+  let rects = "";
+  for (let i = 0; i < bits.length; ) {
+    if (bits[i] !== "1") { i++; continue; }
+    let w = 1;
+    while (bits[i + w] === "1") w++;
+    rects += `<rect x="${i + quiet}" y="0" width="${w}" height="50"/>`;
+    i += w;
+  }
+  const width = bits.length + quiet * 2;
+  return `<svg viewBox="0 0 ${width} 50" preserveAspectRatio="none" fill="currentColor" role="img" aria-label="${escapeHtml(label)}" style="aspect-ratio:${width}/50">${rects}</svg>`;
+}
+
+/** A standalone SVG file (white background, black bars, digits under it) to download, print or put on a label.
+ *  The barcode maker form (download, live preview) is part of OmniaUI Pro: @birdycom/omniaui-pro/barcode-maker.js.
+ *  moduleWidth and height are in px; throws like encodeBarcode for a value it cannot encode. */
+export function barcodeFile(value, { format = "auto", digits = true, moduleWidth = 2, height = 70 } = {}) {
+  const { bits, text } = encodeBarcode(value, format);
+  const quiet = 10;
+  const font = 14;
+  const width = (bits.length + quiet * 2) * moduleWidth;
+  const full = height + (digits ? font + 8 : 0) + 8;
+  let rects = "";
+  for (let i = 0; i < bits.length; ) {
+    if (bits[i] !== "1") { i++; continue; }
+    let w = 1;
+    while (bits[i + w] === "1") w++;
+    rects += `<rect x="${(i + quiet) * moduleWidth}" y="4" width="${w * moduleWidth}" height="${height}"/>`;
+    i += w;
+  }
+  const caption = digits ? `<text x="${width / 2}" y="${height + font + 8}" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="${font}" letter-spacing="1">${escapeHtml(text)}</text>` : "";
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${full}" viewBox="0 0 ${width} ${full}"><rect width="100%" height="100%" fill="#fff"/><g fill="#000">${rects}${caption}</g></svg>`;
+}
+
+/** Draw one .oc-barcode from its data-value and data-format. Shows a short error instead of bars when it cannot. */
+export function renderBarcode(el) {
+  if (!el) return;
+  const value = el.dataset.value ?? "";
+  const digits = el.dataset.digits !== "false";
+  try {
+    const { bits, text } = encodeBarcode(value, el.dataset.format || "auto");
+    el.removeAttribute("data-error");
+    el.innerHTML = barsToSvg(bits, `Barcode ${text}`) + (digits ? `<figcaption class="oc-barcode__digits">${escapeHtml(text)}</figcaption>` : "");
+  } catch (err) {
+    el.setAttribute("data-error", "");
+    el.innerHTML = `<figcaption class="oc-barcode__digits">${escapeHtml(value)}: ${escapeHtml(err.message)}</figcaption>`;
+  }
+}
+
+/** Draw every .oc-barcode[data-value] under scope. */
+export function initBarcodes(scope = document) {
+  scope.querySelectorAll(".oc-barcode[data-value]").forEach(renderBarcode);
+}
+
+// Starts on its own as /js/oc-barcode.js (`npx omniaui copy-js`), with ?auto in the URL or data-oc-auto on the tag.
+function autoStart() {
+  if (typeof document === "undefined") return false;
+  const url = String(import.meta.url);
+  if (url.includes("oc-barcode") || /[?&]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 = () => initBarcodes(document);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
+  else boot();
+}

package/dist/components-extra.css

@@ -110,7 +110,21 @@
 .oc-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px oklch(from var(--oc-ring) l c h / 0.28); }
 .oc-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px oklch(from var(--oc-ring) l c h / 0.28); }
 .oc-slider:disabled { opacity: 0.5; cursor: not-allowed; }
-.oc-slider--vertical { writing-mode: vertical-lr; direction: rtl; inline-size: var(--oc-slider-thumb); block-size: 10rem; }
+/* In a vertical writing mode the inline axis is vertical: inline-size is the height of the slider. */
+.oc-slider--vertical { writing-mode: vertical-lr; direction: rtl; inline-size: 10rem; block-size: var(--oc-slider-thumb); }
+/* Scale under a stepped slider: one mark per step (or per labelled value), centered under the thumb positions.
+   The padding keeps the first and last mark under the thumb center at min and max. */
+.oc-slider-scale {
+  display: flex;
+  justify-content: space-between;
+  padding-inline: calc(var(--oc-slider-thumb, 1.125rem) / 2);
+  margin-block-start: 0.25rem;
+  font-size: 0.6875rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--oc-muted-foreground);
+}
+.oc-slider-scale > * { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; inline-size: 0; }
+.oc-slider-scale > *::before { content: ""; inline-size: 1px; block-size: 0.375rem; background: var(--oc-border); }
 .oc-slider--vertical::-webkit-slider-runnable-track {
   background: linear-gradient(to top, var(--oc-primary) var(--oc-slider-progress), var(--oc-muted) var(--oc-slider-progress));
 }