ywana-core8 0.1.84 → 0.1.86

package/src/html/table2.js

@@ -156,7 +156,6 @@ export const DataTable2 = (props) => {
 
     // Handle tool selection
     const handleToolSelect = useCallback((toolId) => {
-        console.log('handleToolSelect called with toolId:', toolId)
         setActiveTool(prev => {
             const newTool = prev === toolId ? null : toolId
             console.log('Tool changed from', prev, 'to', newTool)
@@ -173,13 +172,13 @@ export const DataTable2 = (props) => {
     const defaultTools = useMemo(() => [
         {
             id: 'columns',
-            icon: 'person',
+            icon: 'view_column',
             title: 'Configurar columnas',
             component: ColumnsPanel
         },
         {
             id: 'export',
-            icon: 'person',
+            icon: 'ios_share',
             title: 'Exportar datos',
             component: ExportPanel
         },
@@ -276,9 +275,13 @@ export const DataTable2 = (props) => {
         className
     ].filter(Boolean).join(' '), [size, density, theme, readability, striped, bordered, hover, loading, skeleton, className])
 
-    // Check if any row has actions column
-    const hasActionsColumn = useMemo(() =>
-        rows.some(row => row.info) || filterable, [rows, filterable])
+    // Check if any row has actions column or if there's an actions column defined
+    const hasActionsColumn = useMemo(() => {
+        const hasActionsColumnDefined = columns.some(col => col.id === 'actions')
+        const hasRowsWithActions = rows.some(row => row.actions && Array.isArray(row.actions))
+        const hasRowsWithInfo = rows.some(row => row.info)
+        return hasActionsColumnDefined || hasRowsWithActions || hasRowsWithInfo || filterable
+    }, [columns, rows, filterable])
 
     // Función de ordenamiento (similar a table.js)
     const multiSort = useCallback((array, sortObject = {}) => {
@@ -782,8 +785,8 @@ const DataTableSummaryRow = ({ columns, rows, showRowNumbers, hasActionsColumn,
                 )
             })}
 
-            {/* Celda para acciones */}
-            {hasActionsColumn && (
+            {/* Celda para acciones - solo cuando no hay columna actions definida */}
+            {hasActionsColumn && !columns.some(col => col.id === 'actions') && (
                 <td className="datatable2__summary-cell datatable2__summary-cell--actions"></td>
             )}
         </tr>
@@ -1008,8 +1011,9 @@ const DataTableHeader = ({
                     )
                 })}
                 
-                {hasActionsColumn && (
-                    <th className="datatable2__actions-header">Actions</th>
+                {/* Cabecera de acciones solo cuando no hay columna actions definida pero sí hay info o filterable */}
+                {hasActionsColumn && !columns.some(col => col.id === 'actions') && (
+                    <th className="datatable2__actions-header"></th>
                 )}
             </tr>
 
@@ -1299,6 +1303,42 @@ const DataTableRow = ({
                     )
                 }
 
+                // Manejar columna "actions" de manera especial
+                if (column.id === 'actions') {
+                    return (
+                        <td key={column.id} className="datatable2__actions-cell">
+                            {/* Renderizar componentes React del array actions */}
+                            {row.actions && Array.isArray(row.actions) && (
+                                <div className="datatable2__actions-container">
+                                    {row.actions.map((action, index) => (
+                                        <span key={index} className="datatable2__action-item">
+                                            {action}
+                                        </span>
+                                    ))}
+                                </div>
+                            )}
+
+                            {/* Icono de expansión para info (solo si no hay actions o si hay espacio) */}
+                            {row.info && (
+                                <Icon
+                                    icon={isExpanded ? "expand_less" : "expand_more"}
+                                    size="small"
+                                    clickable
+                                    action={() => {
+                                        if (row.info && typeof row.info === 'object' && row.info.action) {
+                                            row.info.action(row)
+                                        }
+                                        if (onRowExpand) {
+                                            onRowExpand(row.id)
+                                        }
+                                    }}
+                                    className="datatable2__expand-icon"
+                                />
+                            )}
+                        </td>
+                    )
+                }
+
                 return (
                     <DataTableCell
                         key={column.id}
@@ -1314,8 +1354,10 @@ const DataTableRow = ({
                 )
             })}
 
-            {hasActionsColumn && (
+            {/* Celda de acciones adicional cuando no hay columna actions definida pero sí hay info o filterable */}
+            {hasActionsColumn && !columns.some(col => col.id === 'actions') && (
                 <td className="datatable2__actions-cell">
+                    {/* Icono de expansión para info */}
                     {row.info && (
                         <Icon
                             icon={isExpanded ? "expand_less" : "expand_more"}
@@ -1329,6 +1371,7 @@ const DataTableRow = ({
                                     onRowExpand(row.id)
                                 }
                             }}
+                            className="datatable2__expand-icon"
                         />
                     )}
                 </td>
@@ -1513,8 +1556,8 @@ const DataTableFiltersRow = ({ columns, onClear, showRowNumbers, hasActionsColum
                 </td>
             ))}
 
-            {/* Celda para acciones con botón de limpiar */}
-            {hasActionsColumn && (
+            {/* Celda para acciones con botón de limpiar - solo cuando no hay columna actions definida */}
+            {hasActionsColumn && !columns.some(col => col.id === 'actions') && (
                 <td className="datatable2__filter-cell datatable2__filter-cell--actions">
                     <Icon
                         icon="close"

package/src/html/tokenfield.example.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { TokenField } from './tokenfield'
 import { Button } from './button'
-import { Text } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./text'
+import { Text } from './text'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos del componente TokenField mejorado manteniendo 100% compatibilidad

package/src/widgets/calendar/Calendar.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { Button, Text } from '../../html'
 import Moment from 'moment'
 import { extendMoment } from 'moment-range';
-import 'moment/locale/es'
+import 'moment/locale/es.js'
 import './Calendar.css'
 
 Moment.locale('es')