ywana-core8 0.1.83 → 0.1.85

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/textfield.css

@@ -41,13 +41,18 @@
 
 .textfield>.icon {
   position: absolute;
-  top: 1.5rem;
+  top: 50%;
   right: .2rem;
+  transform: translateY(-50%);
   color: rgba(150,150,150,1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .textfield-outlined.no-label > .icon {
-  top: .5rem;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .textfield-date>.icon,
@@ -147,8 +152,12 @@ input:read-only ~ label,
 
 .dropdown>.icon {
   position: absolute;
-  top: 1.7rem;
+  top: 50%;
   right: .2rem;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dropdown>.decorator {
@@ -161,9 +170,13 @@ input:read-only ~ label,
 .dropdown>.textfield>.icon,
 .dropdown>.textfield-outlined>.icon {
   position: absolute;
-  top: 1.7rem;
+  top: 50%;
   right: 2rem;
+  transform: translateY(-50%);
   color: rgba(150,150,150,1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dropdown>menu {

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/html/tree.css

@@ -14,13 +14,16 @@
     align-items: center;
     font: 1rem;
     color: var(--text-color-light);
+    cursor: pointer;
+    width: 100%;
+    min-height: 2rem;
+    padding: 0.25rem 0;
 }
 
 .tree-item:hover {
-    cursor: pointer;
     background-color: var(--background-color);
     font-weight: 500;
-} 
+}
 
 .tree-item.final {
     margin-left: 1rem;
@@ -35,6 +38,7 @@
 
 .tree-item>i {
     padding-left: .3rem;
+    pointer-events: none;
 }
 
 .tree-item>.label {
@@ -43,10 +47,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    pointer-events: none;
 }
 
 .tree-item>.label.clickable:hover {
-    cursor: pointer;
     color: var(--accent-color);
 }
 
@@ -56,11 +60,13 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    pointer-events: none;
 }
 
 .tree-item>.actions {
     padding: 0 .5rem;
     color: var(--text-color-lighter);
+    pointer-events: auto;
 }
 
 .tree-item>.actions .rmwc-icon {
@@ -95,14 +101,42 @@
     padding-left: 2rem;
 }
 
-/* Tree search */
-.tree__search {
-    padding: 1rem;
+/* Tree header */
+.tree__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem;
     border-bottom: 1px solid var(--divider-color, #e0e0e0);
     background-color: var(--background-color-light, #fafafa);
+    gap: 0.5rem;
     margin-bottom: 0.5rem;
 }
 
+/* When only expand icon is present, align to right */
+.tree__header:has(.tree__expand-control):not(:has(.tree__search)) {
+    justify-content: flex-end;
+}
+
+/* Alternative for browsers that don't support :has() */
+.tree__header--expand-only {
+    justify-content: flex-end;
+}
+
+/* Tree search */
+.tree__search {
+    flex: 1;
+}
+
+/* Tree expand control */
+.tree__expand-control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+}
+
 /* Tree controls */
 .tree__controls {
     display: flex;
@@ -203,6 +237,7 @@
     display: flex;
     align-items: center;
     margin-right: 0.5rem;
+    pointer-events: none;
 }
 
 /* TreeNode loading */
@@ -233,7 +268,7 @@
 
 /* TreeNode children */
 .tree-node__children {
-    margin-left: 1.5rem;
+    margin-left: .8rem;
     border-left: 1px solid var(--divider-color, #e0e0e0);
     padding-left: 0.5rem;
 }

package/src/html/tree.example.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { Tree, TreeNode, TreeItem } from './tree'
 import { Button } from './button'
-import { Icon } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./icon'
+import { Icon } from './icon'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos de los componentes Tree mejorados manteniendo 100% compatibilidad
@@ -209,7 +209,7 @@ export const TreeExamples = () => {
                 }}>
                     <Tree>
                         <TreeNode id="root" label="Root Folder" icon="folder" open={true}>
-                            <TreeNode id="documents" label="Documents" icon="folder" open={false}>
+                            <TreeNode id="documents" label="Documents" icon="folder">
                                 <TreeItem id="doc1" label="Document 1.pdf" icon="picture_as_pdf" onSelect={handleSelect} selected={selectedItem === 'doc1'} />
                                 <TreeItem id="doc2" label="Document 2.docx" icon="description" onSelect={handleSelect} selected={selectedItem === 'doc2'} />
                             </TreeNode>
@@ -221,6 +221,27 @@ export const TreeExamples = () => {
                         </TreeNode>
                     </Tree>
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<Tree>
+    <TreeNode id="root" label="Root Folder" icon="folder" open={true}>
+        <TreeNode id="documents" label="Documents" icon="folder">
+            <TreeItem id="doc1" label="Document 1.pdf" icon="picture_as_pdf"
+                onSelect={handleSelect} selected={selectedItem === 'doc1'} />
+            <TreeItem id="doc2" label="Document 2.docx" icon="description"
+                onSelect={handleSelect} selected={selectedItem === 'doc2'} />
+        </TreeNode>
+        <TreeNode id="images" label="Images" icon="folder" open={true}>
+            <TreeItem id="img1" label="Photo 1.jpg" icon="image"
+                onSelect={handleSelect} selected={selectedItem === 'img1'} />
+            <TreeItem id="img2" label="Photo 2.png" icon="image"
+                onSelect={handleSelect} selected={selectedItem === 'img2'} />
+        </TreeNode>
+        <TreeItem id="readme" label="README.md" icon="description"
+            onSelect={handleSelect} selected={selectedItem === 'readme'} />
+    </TreeNode>
+</Tree>`}
+                />
             </section>
 
             {/* Tree con búsqueda */}
@@ -252,6 +273,24 @@ export const TreeExamples = () => {
                         </TreeNode>
                     </Tree>
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<Tree
+    searchable={true}
+    searchPlaceholder="Buscar archivos y carpetas..."
+    searchBy={['label']}
+    ariaLabel="Árbol de archivos con búsqueda"
+>
+    <TreeNode id="projects" label="Projects" icon="work" open={true}>
+        <TreeNode id="project1" label="Website Project" icon="web">
+            <TreeItem id="index" label="index.html" icon="code"
+                onSelect={handleSelect} selected={selectedItem === 'index'} />
+            <TreeItem id="styles" label="styles.css" icon="palette"
+                onSelect={handleSelect} selected={selectedItem === 'styles'} />
+        </TreeNode>
+    </TreeNode>
+</Tree>`}
+                />
             </section>
 
             {/* Tree con checkboxes y selección múltiple */}
@@ -300,6 +339,31 @@ export const TreeExamples = () => {
                         </TreeNode>
                     </Tree>
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<Tree
+    multiSelect={true}
+    onMultiSelect={handleMultiSelect}
+    ariaLabel="Árbol con selección múltiple"
+>
+    <TreeNode id="backup" label="Backup Files" icon="backup" open={true}>
+        <TreeItem
+            id="file1"
+            label="Config Backup"
+            icon="settings_backup_restore"
+            onSelect={handleSelect}
+            selected={selectedItems.includes('file1')}
+        />
+        <TreeItem
+            id="file2"
+            label="Database Backup"
+            icon="storage"
+            onSelect={handleSelect}
+            selected={selectedItems.includes('file2')}
+        />
+    </TreeNode>
+</Tree>`}
+                />
             </section>
 
             {/* Tree con badges y drag & drop */}
@@ -371,11 +435,90 @@ export const TreeExamples = () => {
                         </TreeNode>
                     </Tree>
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<Tree ariaLabel="Árbol con drag and drop">
+    <TreeNode
+        id="inbox"
+        label="Inbox"
+        icon="inbox"
+        open={true}
+        badge={5}
+        tooltip="5 unread messages"
+        draggable={true}
+        onDragStart={handleDragStart}
+        onDrop={handleDrop}
+    >
+        <TreeItem
+            id="msg1"
+            label="Important Message"
+            icon="priority_high"
+            badge="!"
+            tooltip="High priority message"
+            draggable={true}
+            onDragStart={handleDragStart}
+            onDrop={handleDrop}
+        />
+    </TreeNode>
+</Tree>`}
+                />
+            </section>
+
+            {/* Tree con búsqueda y control de expansión */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Tree con Búsqueda y Control de Expansión</h3>
+                <div style={{
+                    background: '#fff',
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                    maxHeight: '400px'
+                }}>
+                    <Tree
+                        searchable={true}
+                        searchPlaceholder="Buscar en la estructura..."
+                        searchBy={['label']}
+                        showExpandIcon={true}
+                        onExpandAll={() => console.log('Expand all')}
+                        onCollapseAll={() => console.log('Collapse all')}
+                        ariaLabel="Árbol con búsqueda y controles de expansión"
+                    >
+                        <TreeNode id="projects" label="Projects" icon="work" open={false}>
+                            <TreeNode id="web-project" label="Web Project" icon="web" open={false}>
+                                <TreeItem id="index-html" label="index.html" icon="code" onSelect={handleSelect} selected={selectedItem === 'index-html'} />
+                                <TreeItem id="styles-css" label="styles.css" icon="palette" onSelect={handleSelect} selected={selectedItem === 'styles-css'} />
+                                <TreeItem id="script-js" label="script.js" icon="javascript" onSelect={handleSelect} selected={selectedItem === 'script-js'} />
+                            </TreeNode>
+                            <TreeNode id="mobile-app" label="Mobile App" icon="phone_android" open={false}>
+                                <TreeItem id="main-dart" label="main.dart" icon="code" onSelect={handleSelect} selected={selectedItem === 'main-dart'} />
+                                <TreeItem id="pubspec" label="pubspec.yaml" icon="settings" onSelect={handleSelect} selected={selectedItem === 'pubspec'} />
+                            </TreeNode>
+                        </TreeNode>
+                    </Tree>
+                </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<Tree
+    searchable={true}
+    searchPlaceholder="Buscar en la estructura..."
+    searchBy={['label']}
+    showExpandIcon={true}
+    onExpandAll={() => console.log('Expand all')}
+    onCollapseAll={() => console.log('Collapse all')}
+>
+    <TreeNode id="projects" label="Projects" icon="work">
+        <TreeNode id="web-project" label="Web Project" icon="web">
+            <TreeItem id="index-html" label="index.html" icon="code" />
+            <TreeItem id="styles-css" label="styles.css" icon="palette" />
+        </TreeNode>
+    </TreeNode>
+</Tree>`}
+                />
             </section>
 
             {/* Tree con controles de expansión */}
             <section style={{ marginBottom: '2rem' }}>
-                <h3>Tree con Controles de Expansión</h3>
+                <h3>Tree con Control de Expansión</h3>
                 <div style={{ 
                     background: '#fff', 
                     border: '1px solid #ddd',
@@ -383,9 +526,8 @@ export const TreeExamples = () => {
                     overflow: 'hidden',
                     maxHeight: '400px'
                 }}>
-                    <Tree 
-                        expandAll={true}
-                        collapseAll={true}
+                    <Tree
+                        showExpandIcon={true}
                         onExpandAll={() => console.log('Expand all')}
                         onCollapseAll={() => console.log('Collapse all')}
                         ariaLabel="Árbol con controles de expansión"
@@ -408,6 +550,26 @@ export const TreeExamples = () => {
                         </TreeNode>
                     </Tree>
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<Tree
+    showExpandIcon={true}
+    onExpandAll={() => console.log('Expand all')}
+    onCollapseAll={() => console.log('Collapse all')}
+    ariaLabel="Árbol con controles de expansión"
+>
+    <TreeNode id="company" label="Company Structure" icon="business">
+        <TreeNode id="engineering" label="Engineering" icon="engineering">
+            <TreeNode id="frontend" label="Frontend Team" icon="web">
+                <TreeItem id="dev1" label="John Doe - Senior Developer"
+                    icon="person" onSelect={handleSelect} />
+                <TreeItem id="dev2" label="Jane Smith - UI Designer"
+                    icon="design_services" onSelect={handleSelect} />
+            </TreeNode>
+        </TreeNode>
+    </TreeNode>
+</Tree>`}
+                />
             </section>
 
             {/* Estados especiales */}