@asteby/metacore-runtime-react 29.2.2 → 29.2.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @asteby/metacore-runtime-react
 
+## 29.2.4
+
+### Patch Changes
+
+- 99c22b4: El botón de escaneo por cámara en el form declarativo (auto-CRUD) ahora aparece
+  siempre que el campo declara `scan`, igual que el POS, en vez de esconderse
+  cuando el navegador no expone `BarcodeDetector`. En escritorio el usuario veía
+  el icono en el POS pero no al crear un producto (CÓDIGO/SKU) ni en el renglón de
+  compra; ahora es consistente. El BarcodeScanner ya degrada con un mensaje cuando
+  no hay soporte de cámara.
+
+## 29.2.3
+
+### Patch Changes
+
+- 53f6efa: Line-items declarativos (`DynamicLineItems`) responsive en móvil: la tabla de N columnas no cabía en un teléfono (obligaba a scroll horizontal renglón por renglón). En móvil cada renglón se vuelve una **card apilada** con sus columnas como campos etiquetados —mismo widget de celda, editable con el pulgar—, el botón "Agregar renglón" ocupa el ancho completo y los totales se muestran como resumen. De `sm` en adelante se conserva la tabla. Beneficia a todo modal con renglones (crear orden de compra, recepción de mercancía, asientos contables).
+
 ## 29.2.2
 
 ### Patch Changes

package/dist/dynamic-form.js

@@ -8,7 +8,7 @@ import { FieldSection, WizardProgress } from './form-layout-ui';
 import { Input, Textarea, Label, Switch, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@asteby/metacore-ui/primitives';
 import { buildZodSchema, resolveWidget, isLineItemsField, evaluateBalance, applyOptionWhen, getDependsOn, getVisibleWhen, evaluateVisibleWhen, } from './dynamic-form-schema';
 import { ScanLine } from 'lucide-react';
-import { BarcodeScanner, isCameraScanSupported } from './barcode-scanner';
+import { BarcodeScanner } from './barcode-scanner';
 import { useOptionsResolver } from './use-options-resolver';
 import { DynamicLineItems } from './dynamic-line-items';
 import { DynamicSelectField } from './dynamic-select-field';
@@ -253,7 +253,14 @@ function FieldRenderer({ field, value, onChange, initialValues, effectiveOptions
  */
 function ScannableInput({ field, value, onChange, type, }) {
     const [scanOpen, setScanOpen] = useState(false);
-    const scanEnabled = !!(field.scan ?? field.scannable) && isCameraScanSupported();
+    // El botón aparece SIEMPRE que el campo declara `scan`, igual que el POS
+    // (que gatea por su handler, no por soporte). No lo escondemos por
+    // `isCameraScanSupported()`: en un navegador sin `BarcodeDetector` el botón
+    // seguía sin verse en escritorio aunque el campo lo pidiera, y el usuario no
+    // entendía por qué el POS sí lo mostraba y el form no. El BarcodeScanner ya
+    // degrada con un mensaje ("usá un lector físico / escribí a mano") cuando no
+    // hay soporte, así que mostrar el botón es seguro y consistente.
+    const scanEnabled = !!(field.scan ?? field.scannable);
     const input = (_jsx(Input, { id: field.key, type: type, value: value ?? '', onChange: (e) => onChange(type === 'number' ? e.target.valueAsNumber || '' : e.target.value), placeholder: field.placeholder }));
     if (!scanEnabled)
         return input;

package/dist/dynamic-line-items.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-line-items.d.ts","sourceRoot":"","sources":["../src/dynamic-line-items.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAgB7C,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,EAAE,GAAG,SAAS,CAAA;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACnC;AAkBD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,UAAU,EAAE,EAAE,qBAAqB,+BA8J/G"}
+{"version":3,"file":"dynamic-line-items.d.ts","sourceRoot":"","sources":["../src/dynamic-line-items.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAgB7C,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,EAAE,GAAG,SAAS,CAAA;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACnC;AAkBD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,UAAU,EAAE,EAAE,qBAAqB,+BA6O/G"}

package/dist/dynamic-line-items.js

@@ -63,7 +63,8 @@ export function DynamicLineItems({ field, value, onChange, disabled = false, for
         }
         updateCell(idx, key, cellValue);
     };
-    return (_jsxs("div", { className: "grid gap-2", "data-widget": "line_items", children: [_jsx("div", { className: "overflow-x-auto rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/50", children: _jsxs("tr", { children: [itemFields.map((col) => (_jsxs("th", { className: 'px-3 py-2 font-medium ' +
+    const totalCols = itemFields.filter((c) => c.total);
+    return (_jsxs("div", { className: "grid gap-2", "data-widget": "line_items", children: [_jsxs("div", { className: "grid gap-2 sm:hidden", children: [rows.length === 0 && (_jsx("div", { className: "text-muted-foreground rounded-md border px-3 py-4 text-center text-sm", children: "Sin renglones" })), rows.map((row, idx) => (_jsxs("div", { className: "rounded-md border p-3", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("span", { className: "text-muted-foreground text-xs font-medium", children: ["Rengl\u00F3n ", idx + 1] }), !lockRows && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7", onClick: () => removeRow(idx), disabled: disabled, "aria-label": "Eliminar rengl\u00F3n", children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] }), _jsx("div", { className: "grid gap-2.5", children: itemFields.map((col) => (_jsxs("div", { className: "grid gap-1", children: [_jsxs("span", { className: "text-xs font-medium", children: [col.label, col.required && (_jsx("span", { className: "ml-1 text-red-500", children: "*" }))] }), _jsx(CellRenderer, { field: col, value: row?.[col.key], onChange: (v) => handleCell(idx, col.key, v), disabled: disabled, formValues: formValues, rowValues: row })] }, col.key))) })] }, idx))), hasTotals && rows.length > 0 && (_jsx("div", { className: "bg-muted/30 grid gap-1.5 rounded-md border p-3", children: totalCols.map((col) => (_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: col.label }), _jsx("span", { className: "font-semibold tabular-nums", children: fmtNumber(totals[col.key] ?? 0) })] }, col.key))) }))] }), _jsx("div", { className: "hidden overflow-x-auto rounded-md border sm:block", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/50", children: _jsxs("tr", { children: [itemFields.map((col) => (_jsxs("th", { className: 'px-3 py-2 font-medium ' +
                                             (isNumericCol(col) ? 'text-right' : 'text-left'), children: [col.label, col.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }, col.key))), !lockRows && _jsx("th", { className: "w-12 px-3 py-2", "aria-label": "acciones" })] }) }), _jsxs("tbody", { children: [rows.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: itemFields.length + (lockRows ? 0 : 1), className: "px-3 py-4 text-center text-muted-foreground", children: "Sin renglones" }) })), rows.map((row, idx) => (_jsxs("tr", { className: "border-t align-top", children: [itemFields.map((col) => (_jsx("td", { className: "px-2 py-1.5", children: _jsx(CellRenderer, { field: col, value: row?.[col.key], onChange: (v) => handleCell(idx, col.key, v), disabled: disabled, formValues: formValues, rowValues: row }) }, col.key))), !lockRows && (_jsx("td", { className: "px-2 py-1.5 text-center", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeRow(idx), disabled: disabled, "aria-label": "Eliminar rengl\u00F3n", children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }) }))] }, idx)))] }), hasTotals && rows.length > 0 && (_jsx("tfoot", { className: "border-t bg-muted/30", children: _jsxs("tr", { children: [itemFields.map((col, ci) => {
                                         if (ci === 0) {
                                             return (_jsx("td", { className: "px-3 py-2 text-left font-medium text-muted-foreground", children: "Totales" }, col.key));
@@ -72,7 +73,7 @@ export function DynamicLineItems({ field, value, onChange, disabled = false, for
                                                 (col.total
                                                     ? 'text-right font-semibold tabular-nums'
                                                     : ''), children: col.total ? fmtNumber(totals[col.key] ?? 0) : null }, col.key));
-                                    }), !lockRows && _jsx("td", {})] }) }))] }) }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [lockRows ? (_jsx("span", {})) : (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addRow, disabled: disabled, children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Agregar rengl\u00F3n"] })), balance && _jsx(BalanceBadge, { state: balance })] })] }));
+                                    }), !lockRows && _jsx("td", {})] }) }))] }) }), _jsxs("div", { className: "flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between", children: [lockRows ? (_jsx("span", {})) : (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addRow, disabled: disabled, className: "w-full sm:w-auto", children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Agregar rengl\u00F3n"] })), balance && _jsx(BalanceBadge, { state: balance })] })] }));
 }
 function BalanceBadge({ state, }) {
     if (state.balanced) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "29.2.2",
+  "version": "29.2.4",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/dynamic-form.tsx

@@ -28,7 +28,7 @@ import {
     evaluateVisibleWhen,
 } from './dynamic-form-schema'
 import { ScanLine } from 'lucide-react'
-import { BarcodeScanner, isCameraScanSupported } from './barcode-scanner'
+import { BarcodeScanner } from './barcode-scanner'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
 import { DynamicLineItems } from './dynamic-line-items'
 import { DynamicSelectField } from './dynamic-select-field'
@@ -442,7 +442,14 @@ function ScannableInput({
     type,
 }: FieldRendererProps & { type: string }) {
     const [scanOpen, setScanOpen] = useState(false)
-    const scanEnabled = !!(field.scan ?? field.scannable) && isCameraScanSupported()
+    // El botón aparece SIEMPRE que el campo declara `scan`, igual que el POS
+    // (que gatea por su handler, no por soporte). No lo escondemos por
+    // `isCameraScanSupported()`: en un navegador sin `BarcodeDetector` el botón
+    // seguía sin verse en escritorio aunque el campo lo pidiera, y el usuario no
+    // entendía por qué el POS sí lo mostraba y el form no. El BarcodeScanner ya
+    // degrada con un mensaje ("usá un lector físico / escribí a mano") cuando no
+    // hay soporte, así que mostrar el botón es seguro y consistente.
+    const scanEnabled = !!(field.scan ?? field.scannable)
     const input = (
         <Input
             id={field.key}

package/src/dynamic-line-items.tsx

@@ -113,9 +113,81 @@ export function DynamicLineItems({ field, value, onChange, disabled = false, for
         updateCell(idx, key, cellValue)
     }
 
+    const totalCols = itemFields.filter((c) => c.total)
+
     return (
         <div className="grid gap-2" data-widget="line_items">
-            <div className="overflow-x-auto rounded-md border">
+            {/* Móvil (<sm): una tabla de N columnas no cabe en un teléfono —
+                obliga a scroll horizontal renglón por renglón. Cada renglón se
+                vuelve una CARD apilada con sus columnas como campos etiquetados
+                (mismo CellRenderer), legible y editable con el pulgar. La tabla
+                se conserva de sm en adelante. */}
+            <div className="grid gap-2 sm:hidden">
+                {rows.length === 0 && (
+                    <div className="text-muted-foreground rounded-md border px-3 py-4 text-center text-sm">
+                        Sin renglones
+                    </div>
+                )}
+                {rows.map((row, idx) => (
+                    <div key={idx} className="rounded-md border p-3">
+                        <div className="mb-2 flex items-center justify-between">
+                            <span className="text-muted-foreground text-xs font-medium">
+                                Renglón {idx + 1}
+                            </span>
+                            {!lockRows && (
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="size-7"
+                                    onClick={() => removeRow(idx)}
+                                    disabled={disabled}
+                                    aria-label="Eliminar renglón"
+                                >
+                                    <Trash2 className="h-4 w-4 text-red-500" />
+                                </Button>
+                            )}
+                        </div>
+                        <div className="grid gap-2.5">
+                            {itemFields.map((col) => (
+                                <div key={col.key} className="grid gap-1">
+                                    <span className="text-xs font-medium">
+                                        {col.label}
+                                        {col.required && (
+                                            <span className="ml-1 text-red-500">*</span>
+                                        )}
+                                    </span>
+                                    <CellRenderer
+                                        field={col}
+                                        value={row?.[col.key]}
+                                        onChange={(v: any) => handleCell(idx, col.key, v)}
+                                        disabled={disabled}
+                                        formValues={formValues}
+                                        rowValues={row}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+                {hasTotals && rows.length > 0 && (
+                    <div className="bg-muted/30 grid gap-1.5 rounded-md border p-3">
+                        {totalCols.map((col) => (
+                            <div
+                                key={col.key}
+                                className="flex items-center justify-between text-sm"
+                            >
+                                <span className="text-muted-foreground">{col.label}</span>
+                                <span className="font-semibold tabular-nums">
+                                    {fmtNumber(totals[col.key] ?? 0)}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            <div className="hidden overflow-x-auto rounded-md border sm:block">
                 <table className="w-full text-sm">
                     <thead className="bg-muted/50">
                         <tr>
@@ -210,11 +282,18 @@ export function DynamicLineItems({ field, value, onChange, disabled = false, for
                     )}
                 </table>
             </div>
-            <div className="flex items-center justify-between gap-2">
+            <div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between">
                 {lockRows ? (
                     <span />
                 ) : (
-                    <Button type="button" variant="outline" size="sm" onClick={addRow} disabled={disabled}>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={addRow}
+                        disabled={disabled}
+                        className="w-full sm:w-auto"
+                    >
                         <Plus className="mr-1 h-4 w-4" />
                         Agregar renglón
                     </Button>