ywana-core8 0.1.83 → 0.1.85

package/src/html/table.js

@@ -19,6 +19,9 @@ export const DataTable = (props) => {
     const [sortDir, setSortDir] = useState({})
     const [allChecked, setAllChecked] = useState(false)
 
+    // Detectar si alguna fila tiene info para mostrar la columna de expansión
+    const hasInfoRows = rows.some(row => row.info)
+
     function changeSort(id) {
         if (multisort) {
             const nextDir = sortDir[id] ? sortDir[id] * -1 : 1
@@ -94,16 +97,18 @@ export const DataTable = (props) => {
                             const resizableStyle = resizable ? "resizable-column" : ""
                             const sort = sortDir[id] ? sortDir[id] : null
                             const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.values(item).filter(v => v.column === true).length] : [2, 1]
+                            const headerClasses = `${resizableStyle} ${id}`.trim()
                             return (
-                                <th key={id} className={resizableStyle} rowSpan={rowspan} colSpan={colspan}>
+                                <th key={id} className={headerClasses} rowSpan={rowspan} colSpan={colspan}>
                                     <div>
-                                        {id === "checked" && onCheckAll ? <CheckBox onChange={checkAll} value={allChecked} /> : <Text key={`th_${id}`}>{label}</Text>}
+                                        {id === "checked" && onCheckAll ? <CheckBox onChange={checkAll} value={allChecked} /> :
+                                         id === "actions" ? null : <Text key={`th_${id}`}>{label}</Text>}
                                         {sortable ? <SortIcon sortDir={sortDir[id]} onChange={() => changeSort(id)} /> : null}
                                     </div>
                                 </th>
                             )
                         })}
-                        <th rowSpan={2} colSpan={1}></th>
+                        {hasInfoRows ? <th rowSpan={2} colSpan={1} style={{ width: '3rem' }}></th> : null}
                     </tr>
                     <tr>
                         {
@@ -125,7 +130,7 @@ export const DataTable = (props) => {
 
                     {rows.length > 0 ?
                         multiSort(rows, sortDir).map((row, index) => (
-                            <DataTableRow key={row.id} index={index} row={row} columns={columns} onSelect={select} onDrop={moveRow} editable={editable} expanded={expanded} />
+                            <DataTableRow key={row.id} index={index} row={row} columns={columns} onSelect={select} onDrop={moveRow} editable={editable} expanded={expanded} hasInfoRows={hasInfoRows} />
                         )) : (
                             <tr>
                                 <td colSpan={1000}>
@@ -185,7 +190,7 @@ const DataTableFiltersRow = ({ columns, onClear }) => {
  * DataTable Row
  */
 const DataTableRow = (props) => {
-    const { index, row, columns = [], onSelect, editable, expanded = false } = props
+    const { index, row, columns = [], onSelect, editable, expanded = false, hasInfoRows = false } = props
     const { selected = false, className } = row
     const [isInfoOpen, toggleInfo] = useState(expanded)
     const infoIcon = isInfoOpen ? 'expand_less' : 'expand_more'
@@ -195,11 +200,11 @@ const DataTableRow = (props) => {
         <Fragment>
             <tr className={`${style} ${className}`} onClick={ev => onSelect(row, ev)}>
                 {columns.map((column, cindex) => <DataTableCell key={`${column.id}_${cindex}`} index={index} row={row} column={column} cell={row[column.id]} editable={editable || column.editable} />)}
-                {row.info ? <td><Icon icon={infoIcon} clickable action={() => toggleInfo(!isInfoOpen)} /></td> : <td></td>}
+                {hasInfoRows ? (row.info ? <td><Icon icon={infoIcon} clickable action={() => toggleInfo(!isInfoOpen)} /></td> : <td></td>) : null}
             </tr>
             {row.info && isInfoOpen ? (
                 <tr className="table-row-info">
-                    <td colSpan={columns.length + 1}>
+                    <td colSpan={columns.length + (hasInfoRows ? 1 : 0)}>
                         {isFunction(row.info) ? row.info() : row.info}
                     </td>
                 </tr>

package/src/html/table2-actions-test.js

@@ -0,0 +1,138 @@
+import React from 'react'
+import { DataTable2 } from './table2'
+import { Button } from './button'
+import { Icon } from './icon'
+
+/**
+ * Componente de prueba para la nueva funcionalidad de columnas de acciones
+ */
+export const ActionsColumnTest = () => {
+    // Datos de ejemplo con acciones
+    const columns = [
+        { id: 'id', label: 'ID', width: 60 },
+        { id: 'name', label: 'Nombre', sortable: true },
+        { id: 'email', label: 'Email', sortable: true },
+        { id: 'status', label: 'Estado', filterable: true },
+        { id: 'actions', label: 'Acciones' } // ← Columna de acciones
+    ]
+
+    const rows = [
+        {
+            id: 1,
+            name: 'Juan Pérez',
+            email: 'juan@example.com',
+            status: 'active',
+            actions: [
+                <Button 
+                    key="edit" 
+                    label="Editar" 
+                    size="small" 
+                    variant="primary" 
+                    action={() => alert('Editar Juan')} 
+                />,
+                <Button 
+                    key="delete" 
+                    label="Eliminar" 
+                    size="small" 
+                    variant="danger" 
+                    action={() => alert('Eliminar Juan')} 
+                />
+            ]
+        },
+        {
+            id: 2,
+            name: 'María García',
+            email: 'maria@example.com',
+            status: 'pending',
+            actions: [
+                <Icon 
+                    key="approve" 
+                    icon="check_circle" 
+                    size="small" 
+                    clickable 
+                    action={() => alert('Aprobar María')} 
+                    title="Aprobar" 
+                />,
+                <Icon 
+                    key="reject" 
+                    icon="cancel" 
+                    size="small" 
+                    clickable 
+                    action={() => alert('Rechazar María')} 
+                    title="Rechazar" 
+                />
+            ]
+        },
+        {
+            id: 3,
+            name: 'Carlos López',
+            email: 'carlos@example.com',
+            status: 'inactive',
+            actions: [
+                <Button 
+                    key="activate" 
+                    label="Activar" 
+                    size="small" 
+                    variant="success" 
+                    action={() => alert('Activar Carlos')} 
+                />
+            ]
+        }
+    ]
+
+    return (
+        <div style={{ padding: '2rem' }}>
+            <h1>Prueba de Columnas de Acciones</h1>
+            <p>Esta tabla demuestra la nueva funcionalidad de columnas de acciones con componentes React.</p>
+            
+            <div style={{
+                background: '#fff',
+                padding: '1rem',
+                border: '1px solid #ddd',
+                borderRadius: '8px',
+                marginBottom: '2rem'
+            }}>
+                <h2>Ejemplo 1: Botones e Iconos Mixtos</h2>
+                <DataTable2
+                    id="actions-test-1"
+                    columns={columns}
+                    rows={rows}
+                    density="normal"
+                    striped={true}
+                    resizable={true}
+                />
+            </div>
+
+            <div style={{
+                background: '#fff',
+                padding: '1rem',
+                border: '1px solid #ddd',
+                borderRadius: '8px'
+            }}>
+                <h2>Ejemplo 2: Solo Iconos (Compacto)</h2>
+                <DataTable2
+                    id="actions-test-2"
+                    columns={[
+                        { id: 'id', label: 'ID', width: 60 },
+                        { id: 'name', label: 'Nombre', sortable: true },
+                        { id: 'email', label: 'Email', sortable: true },
+                        { id: 'actions' } // Sin label
+                    ]}
+                    rows={rows.map(row => ({
+                        ...row,
+                        actions: [
+                            <Icon key="edit" icon="edit" size="small" clickable action={() => alert(`Editar ${row.name}`)} title="Editar" />,
+                            <Icon key="delete" icon="delete" size="small" clickable action={() => alert(`Eliminar ${row.name}`)} title="Eliminar" />,
+                            <Icon key="more" icon="more_vert" size="small" clickable action={() => alert(`Más opciones para ${row.name}`)} title="Más" />
+                        ]
+                    }))}
+                    density="compact"
+                    striped={true}
+                    hover={true}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default ActionsColumnTest

package/src/html/table2.css

@@ -19,6 +19,8 @@
     width: 100%;
     border-collapse: collapse;
     table-layout: auto;
+    overflow: visible !important;
+
 }
 
 /* Header styles */
@@ -1373,13 +1375,48 @@ body.datatable2-resizing {
 }
 
 /* Special cell types */
-.datatable2__select-cell,
-.datatable2__actions-cell {
-    width: 48px;
+.datatable2__select-cell {
+    width: auto;
+    min-width: 48px;
     text-align: center;
     padding: 8px;
 }
 
+.datatable2__actions-cell {
+    width: 1%;
+    white-space: nowrap;
+    text-align: right;
+    padding: 8px;
+    vertical-align: middle;
+}
+
+.datatable2__actions-header {
+    width: 1%;
+    white-space: nowrap;
+    text-align: right;
+    padding: 8px;
+}
+
+/* Actions container and items */
+.datatable2__actions-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+    flex-wrap: nowrap;
+}
+
+.datatable2__action-item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.datatable2__expand-icon {
+    margin-left: 4px;
+}
+
 .datatable2__row-number {
     width: 60px;
     text-align: center;

package/src/html/table2.example.js

@@ -1,6 +1,8 @@
 import React, { useState, useCallback } from 'react'
 import { DataTable2 } from './table2'
 import { Button } from './button'
+import { Icon } from './icon'
+import { ActionsCell } from './actions-cell'
 import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 // Ejemplo de componente personalizado para el panel
@@ -289,6 +291,15 @@ export const DataTable2Examples = () => {
                 { id: 'row-numbers-only', title: 'Solo Números de Fila' }
             ]
         },
+        {
+            id: 'actions-column',
+            title: '⚡ Columnas de Acciones',
+            icon: 'build',
+            subsections: [
+                { id: 'actions-basic', title: 'Acciones Básicas con Iconos' },
+                { id: 'actions-icons', title: 'Acciones con Iconos y ActionsCell' }
+            ]
+        },
         {
             id: 'performance',
             title: 'Rendimiento y Escalabilidad',
@@ -3121,6 +3132,325 @@ console.log(stats)
 // ✅ Formateo específico por tipo de datos`}
                 />
             </ExampleSection>
+
+            {/* Nueva sección: Columnas de Acciones con Componentes React */}
+            <ExampleSection id="actions-column" title="⚡ Columnas de Acciones con Componentes React" icon="build">
+                <div style={{
+                    background: '#f0f9ff',
+                    padding: '1rem',
+                    borderRadius: '8px',
+                    marginBottom: '1.5rem',
+                    border: '1px solid #e0f2fe'
+                }}>
+                    <h4 style={{ margin: '0 0 0.5rem 0', color: '#0277bd' }}>🎯 Nueva Funcionalidad</h4>
+                    <p style={{ margin: '0', fontSize: '0.875rem', color: '#01579b' }}>
+                        Ahora puedes especificar una columna <code>actions</code> en la lista de columnas y pasar un array de componentes React
+                        (botones, iconos, etc.) en cada fila. Los componentes se renderizan directamente en las celdas.
+                    </p>
+                </div>
+
+                <ExampleSubsection id="actions-basic" title="Acciones Básicas con Iconos">
+                    {(() => {
+                        // Datos de ejemplo con acciones
+                        const actionsData = [
+                            {
+                                id: 1,
+                                name: 'Juan Pérez',
+                                email: 'juan@example.com',
+                                status: 'active',
+                                actions: [
+                                    <Button key="edit" label="Editar" size="small" variant="primary" action={() => alert('Editar Juan')} />,
+                                    <Button key="delete" label="Eliminar" size="small" variant="danger" action={() => alert('Eliminar Juan')} />
+                                ]
+                            },
+                            {
+                                id: 2,
+                                name: 'María García',
+                                email: 'maria@example.com',
+                                status: 'pending',
+                                actions: [
+                                    <Button key="approve" label="Aprobar" size="small" variant="success" action={() => alert('Aprobar María')} />,
+                                    <Button key="reject" label="Rechazar" size="small" variant="danger" action={() => alert('Rechazar María')} />
+                                ]
+                            },
+                            {
+                                id: 3,
+                                name: 'Carlos López',
+                                email: 'carlos@example.com',
+                                status: 'inactive',
+                                actions: [
+                                    <Button key="activate" label="Activar" size="small" variant="success" action={() => alert('Activar Carlos')} />
+                                ]
+                            }
+                        ]
+
+                        const actionsColumns = [
+                            { id: 'id', label: 'ID', width: 60 },
+                            { id: 'name', label: 'Nombre', sortable: true },
+                            { id: 'email', label: 'Email', sortable: true },
+                            { id: 'status', label: 'Estado', filterable: true },
+                            { id: 'actions', label: 'Acciones' } // ← Columna de acciones
+                        ]
+
+                        return (
+                            <div style={{
+                                background: '#fff',
+                                padding: '1rem',
+                                border: '1px solid #ddd',
+                                borderRadius: '8px',
+                                marginBottom: '1rem'
+                            }}>
+                                <DataTable2
+                                    id="actions-basic-demo"
+                                    columns={actionsColumns}
+                                    rows={actionsData}
+                                    density="normal"
+                                    striped={true}
+                                    resizable={true}
+                                />
+                            </div>
+                        )
+                    })()}
+
+                    <CodeSnippet
+                        title="Código de Acciones Básicas"
+                        code={`import { DataTable2 } from './table2'
+import { Button } from './button'
+
+// Definir columnas incluyendo la columna de acciones
+const columns = [
+    { id: 'id', label: 'ID', width: 60 },
+    { id: 'name', label: 'Nombre', sortable: true },
+    { id: 'email', label: 'Email', sortable: true },
+    { id: 'status', label: 'Estado', filterable: true },
+    { id: 'actions', label: 'Acciones' }  // ← Columna de acciones
+]
+
+// Datos con array de componentes React en la propiedad actions
+const rows = [
+    {
+        id: 1,
+        name: 'Juan Pérez',
+        email: 'juan@example.com',
+        status: 'active',
+        actions: [  // ← Array de componentes React
+            <Button
+                key="edit"
+                label="Editar"
+                size="small"
+                variant="primary"
+                action={() => alert('Editar Juan')}
+            />,
+            <Button
+                key="delete"
+                label="Eliminar"
+                size="small"
+                variant="danger"
+                action={() => alert('Eliminar Juan')}
+            />
+        ]
+    },
+    // ... más filas
+]
+
+<DataTable2
+    columns={columns}
+    rows={rows}
+    density="normal"
+    striped={true}
+    resizable={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="actions-icons" title="Acciones con Iconos y Tooltips">
+                    {(() => {
+
+                        // Datos con acciones usando iconos
+                        const iconActionsData = [
+                            {
+                                id: 1,
+                                name: 'Documento.pdf',
+                                size: '2.5 MB',
+                                type: 'PDF',
+                                actions: [
+                                    <Icon key="view" icon="visibility" size="small" clickable action={() => alert('Ver documento')} title="Ver" />,
+                                    <Icon key="download" icon="download" size="small" clickable action={() => alert('Descargar')} title="Descargar" />,
+                                    <Icon key="share" icon="share" size="small" clickable action={() => alert('Compartir')} title="Compartir" />,
+                                    <Icon key="delete" icon="delete" size="small" clickable action={() => alert('Eliminar')} title="Eliminar" />
+                                ]
+                            },
+                            {
+                                id: 2,
+                                name: 'Imagen.jpg',
+                                size: '1.2 MB',
+                                type: 'Imagen',
+                                actions: [
+                                    <Icon key="view" icon="visibility" size="small" clickable action={() => alert('Ver imagen')} title="Ver" />,
+                                    <Icon key="edit" icon="edit" size="small" clickable action={() => alert('Editar imagen')} title="Editar" />,
+                                    <Icon key="download" icon="download" size="small" clickable action={() => alert('Descargar')} title="Descargar" />
+                                ]
+                            },
+                            {
+                                id: 3,
+                                name: 'Video.mp4',
+                                size: '15.8 MB',
+                                type: 'Video',
+                                actions: [
+                                    <Icon key="play" icon="play_arrow" size="small" clickable action={() => alert('Reproducir video')} title="Reproducir" />,
+                                    <Icon key="download" icon="download" size="small" clickable action={() => alert('Descargar')} title="Descargar" />
+                                ]
+                            },
+                            // Filas con ActionsCell para demostrar integración
+                            {
+                                id: 4,
+                                name: 'Proyecto.zip',
+                                size: '45.2 MB',
+                                type: 'Archivo',
+                                actions: [
+                                    <ActionsCell
+                                        key="actions-cell"
+                                        actions={
+                                            <div style={{ display: 'flex', gap: '4px' }}>
+                                                <Icon icon="visibility" size="small" clickable action={() => alert('Ver proyecto')} title="Ver" />
+                                                <Icon icon="download" size="small" clickable action={() => alert('Descargar')} title="Descargar" />
+                                                <Icon icon="edit" size="small" clickable action={() => alert('Editar')} title="Editar" />
+                                                <Icon icon="share" size="small" clickable action={() => alert('Compartir')} title="Compartir" />
+                                                <Icon icon="copy" size="small" clickable action={() => alert('Copiar')} title="Copiar" />
+                                                <Icon icon="delete" size="small" clickable action={() => alert('Eliminar')} title="Eliminar" />
+                                            </div>
+                                        }
+                                        maxWidth={120}
+                                        menuAlign="left"
+                                    />
+                                ]
+                            },
+                            {
+                                id: 5,
+                                name: 'Presentación.pptx',
+                                size: '8.7 MB',
+                                type: 'Presentación',
+                                actions: [
+                                    <ActionsCell
+                                        key="actions-cell"
+                                        actions={
+                                            <div style={{ display: 'flex', gap: '4px' }}>
+                                                <Button size="small" variant="outlined" label="Abrir" action={() => alert('Abrir presentación')} />
+                                                <Button size="small" variant="outlined" label="Editar" action={() => alert('Editar presentación')} />
+                                                <Button size="small" variant="outlined" label="Compartir" action={() => alert('Compartir presentación')} />
+                                            </div>
+                                        }
+                                        maxWidth={150}
+                                        menuAlign="left"
+                                    />
+                                ]
+                            }
+                        ]
+
+                        const iconColumns = [
+                            { id: 'id', label: 'ID', width: 60 },
+                            { id: 'name', label: 'Archivo', sortable: true },
+                            { id: 'size', label: 'Tamaño', sortable: true },
+                            { id: 'type', label: 'Tipo', filterable: true },
+                            { id: 'actions' } // ← Sin label para que no aparezca texto en la cabecera
+                        ]
+
+                        return (
+                            <div style={{
+                                background: '#fff',
+                                padding: '1rem',
+                                border: '1px solid #ddd',
+                                borderRadius: '8px',
+                                marginBottom: '1rem'
+                            }}>
+                                <DataTable2
+                                    id="actions-icons-demo"
+                                    columns={iconColumns}
+                                    rows={iconActionsData}
+                                    density="compact"
+                                    striped={true}
+                                    hover={true}
+                                />
+                            </div>
+                        )
+                    })()}
+
+                    <CodeSnippet
+                        title="Código de Acciones con Iconos y ActionsCell"
+                        code={`import { DataTable2 } from './table2'
+import { Icon } from './icon'
+import { ActionsCell } from './actions-cell'
+import { Button } from './button'
+
+const columns = [
+    { id: 'id', label: 'ID', width: 60 },
+    { id: 'name', label: 'Archivo', sortable: true },
+    { id: 'size', label: 'Tamaño', sortable: true },
+    { id: 'type', label: 'Tipo', filterable: true },
+    { id: 'actions' }  // ← Sin label para cabecera vacía
+]
+
+const rows = [
+    {
+        id: 1,
+        name: 'Documento.pdf',
+        size: '2.5 MB',
+        type: 'PDF',
+        actions: [  // ← Array de iconos clickeables
+            <Icon
+                key="view"
+                icon="visibility"
+                size="small"
+                clickable
+                action={() => alert('Ver documento')}
+                title="Ver"
+            />,
+            <Icon
+                key="download"
+                icon="download"
+                size="small"
+                clickable
+                action={() => alert('Descargar')}
+                title="Descargar"
+            />
+        ]
+    },
+    {
+        id: 2,
+        name: 'Proyecto.zip',
+        size: '45.2 MB',
+        type: 'Archivo',
+        actions: [  // ← Usando ActionsCell para muchas acciones
+            <ActionsCell
+                key="actions-cell"
+                actions={
+                    <div style={{ display: 'flex', gap: '4px' }}>
+                        <Icon icon="visibility" size="small" clickable action={() => alert('Ver')} title="Ver" />
+                        <Icon icon="download" size="small" clickable action={() => alert('Descargar')} title="Descargar" />
+                        <Icon icon="edit" size="small" clickable action={() => alert('Editar')} title="Editar" />
+                        <Icon icon="share" size="small" clickable action={() => alert('Compartir')} title="Compartir" />
+                        <Icon icon="copy" size="small" clickable action={() => alert('Copiar')} title="Copiar" />
+                        <Icon icon="delete" size="small" clickable action={() => alert('Eliminar')} title="Eliminar" />
+                    </div>
+                }
+                maxWidth={120}  // ← Se convierte en menú automáticamente
+                menuAlign="left"  // ← Se abre hacia la izquierda
+            />
+        ]
+    },
+    // ... más filas
+]
+
+<DataTable2
+    columns={columns}
+    rows={rows}
+    density="compact"
+    striped={true}
+    hover={true}
+/>`}
+                    />
+                </ExampleSubsection>
+            </ExampleSection>
         </ExampleLayout>
     )
 }