elementdrawing 1.0.0

package/src/jsx/components/Table.jsx

@@ -0,0 +1,332 @@
+/**
+ * Table Component for ElementDrawing Framework
+ * Supports sorting, pagination, selection, filtering, striped, bordered, compact, loading, empty, expandable, fixed header
+ */
+const ED = require('../core/element');
+
+function Table(props) {
+  const {
+    data = [],
+    columns = [],
+    loading = false,
+    striped = false,
+    bordered = false,
+    compact = false,
+    hoverable = true,
+    selectable = false,
+    selectedRowKeys = [],
+    onSelectionChange,
+    onRowClick,
+    onRowExpand,
+    expandedRowKeys = [],
+    expandable = false,
+    expandedRowRender,
+    sortField,
+    sortOrder,
+    onSort,
+    pagination = false,
+    pageSize = 10,
+    currentPage = 1,
+    total = 0,
+    onPageChange,
+    onPageSizeChange,
+    showPagination = true,
+    pageSizeOptions = [10, 20, 50, 100],
+    emptyText = 'No data',
+    emptyIcon,
+    rowKey = 'id',
+    className = '',
+    style = {},
+    fixedHeader = false,
+    maxHeight,
+    footer,
+    title,
+    size = 'default',
+    showHeader = true,
+    scrollX,
+    rowClassName,
+    onFilter,
+    filters,
+  } = props;
+
+  const sizeClasses = {
+    small: 'ed-text-xs',
+    default: 'ed-text-sm',
+    large: 'ed-text-base',
+  };
+
+  const cellPadding = {
+    small: 'ed-px-3 ed-py-1.5',
+    default: 'ed-px-4 ed-py-3',
+    large: 'ed-px-5 ed-py-4',
+  };
+
+  const isAllSelected = data.length > 0 && selectedRowKeys.length === data.length;
+  const isIndeterminate = selectedRowKeys.length > 0 && selectedRowKeys.length < data.length;
+
+  const handleSelectAll = () => {
+    if (isAllSelected) {
+      onSelectionChange?.([]);
+    } else {
+      onSelectionChange?.(data.map(row => row[rowKey]));
+    }
+  };
+
+  const handleSelectRow = (row) => {
+    const key = row[rowKey];
+    const newSelected = selectedRowKeys.includes(key)
+      ? selectedRowKeys.filter(k => k !== key)
+      : [...selectedRowKeys, key];
+    onSelectionChange?.(newSelected);
+  };
+
+  const handleSort = (column) => {
+    if (!column.sortable) return;
+    let newOrder = 'asc';
+    if (sortField === column.key && sortOrder === 'asc') newOrder = 'desc';
+    if (sortField === column.key && sortOrder === 'desc') newOrder = null;
+    onSort?.(column.key, newOrder);
+  };
+
+  const sortIcon = (column) => {
+    if (!column.sortable) return null;
+    const isActive = sortField === column.key;
+    return ED.createElement('span', { className: 'ed-inline-flex ed-flex-col ed-ml-1 ed-leading-none' },
+      ED.createElement('svg', {
+        className: `ed-w-3 ed-h-3 ${isActive && sortOrder === 'asc' ? 'ed-text-blue-600' : 'ed-text-gray-400'}`,
+        viewBox: '0 0 12 12', fill: 'currentColor',
+        children: ED.createElement('path', { d: 'M6 2l4 4H2z' }),
+      }),
+      ED.createElement('svg', {
+        className: `ed-w-3 ed-h-3 ${isActive && sortOrder === 'desc' ? 'ed-text-blue-600' : 'ed-text-gray-400'}`,
+        viewBox: '0 0 12 12', fill: 'currentColor',
+        children: ED.createElement('path', { d: 'M6 10L2 6h8z' }),
+      })
+    );
+  };
+
+  const checkboxCell = (checked, onChange) =>
+    ED.createElement('input', {
+      type: 'checkbox',
+      checked,
+      onChange,
+      className: 'ed-w-4 ed-h-4 ed-text-blue-600 ed-rounded ed-border-gray-300 focus:ed-ring-blue-500 ed-cursor-pointer',
+    });
+
+  const expandCell = (row) => {
+    const key = row[rowKey];
+    const isExpanded = expandedRowKeys.includes(key);
+    return ED.createElement('button', {
+      className: 'ed-w-6 ed-h-6 ed-flex ed-items-center ed-justify-center ed-rounded ed-text-gray-500 hover:ed-bg-gray-100 ed-transition-transform',
+      onClick: (e) => { e.stopPropagation(); onRowExpand?.(key, !isExpanded); },
+      style: { transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)' },
+      children: ED.createElement('svg', {
+        className: 'ed-w-4 ed-h-4', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+        children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M9 5l7 7-7 7' }),
+      }),
+    });
+  };
+
+  const headerRow = ED.createElement('tr', {
+    className: 'ed-bg-gray-50 ed-border-b ed-border-gray-200',
+    children: [
+      expandable ? ED.createElement('th', { key: 'expand', className: `${cellPadding[size || 'default']} ed-w-10` }) : null,
+      selectable ? ED.createElement('th', { key: 'select', className: `${cellPadding[size || 'default']} ed-w-10` },
+        checkboxCell(isAllSelected, handleSelectAll)
+      ) : null,
+      ...columns.map((col, idx) =>
+        ED.createElement('th', {
+          key: col.key || idx,
+          className: [
+            cellPadding[size || 'default'],
+            'ed-font-semibold ed-text-gray-700 ed-text-left ed-whitespace-nowrap',
+            col.sortable ? 'ed-cursor-pointer hover:ed-bg-gray-100 ed-select-none' : '',
+            col.align === 'center' ? 'ed-text-center' : col.align === 'right' ? 'ed-text-right' : '',
+            col.className || '',
+          ].filter(Boolean).join(' '),
+          style: col.width ? { width: col.width } : {},
+          onClick: col.sortable ? () => handleSort(col) : undefined,
+          children: [
+            ED.createElement('span', null, col.title || col.header),
+            col.sortable ? sortIcon(col) : null,
+          ],
+        })
+      ),
+    ].filter(Boolean),
+  });
+
+  const renderRow = (row, rowIndex) => {
+    const key = row[rowKey] || rowIndex;
+    const isSelected = selectedRowKeys.includes(key);
+    const isExpanded = expandedRowKeys.includes(key);
+
+    const rowClasses = [
+      striped && rowIndex % 2 === 1 ? 'ed-bg-gray-50' : 'ed-bg-white',
+      hoverable ? 'hover:ed-bg-blue-50' : '',
+      isSelected ? 'ed-bg-blue-50' : '',
+      onRowClick ? 'ed-cursor-pointer' : '',
+      bordered ? 'ed-border-b ed-border-gray-200' : 'ed-border-b ed-border-gray-100',
+      typeof rowClassName === 'function' ? rowClassName(row, rowIndex) : rowClassName || '',
+    ].filter(Boolean).join(' ');
+
+    const mainRow = ED.createElement('tr', {
+      key,
+      className: rowClasses,
+      onClick: (e) => onRowClick?.(row, rowIndex, e),
+      children: [
+        expandable ? ED.createElement('td', { key: 'expand', className: cellPadding[size || 'default'] }, expandCell(row)) : null,
+        selectable ? ED.createElement('td', { key: 'select', className: cellPadding[size || 'default'] },
+          checkboxCell(isSelected, () => handleSelectRow(row))
+        ) : null,
+        ...columns.map((col, colIdx) => {
+          const cellValue = col.render ? col.render(row[col.key], row, rowIndex) : row[col.key];
+          return ED.createElement('td', {
+            key: col.key || colIdx,
+            className: [
+              cellPadding[size || 'default'],
+              col.align === 'center' ? 'ed-text-center' : col.align === 'right' ? 'ed-text-right' : '',
+              col.ellipsis ? 'ed-truncate ed-max-w-xs' : '',
+              'ed-text-gray-700',
+            ].filter(Boolean).join(' '),
+            style: col.width ? { width: col.width } : {},
+            children: cellValue,
+          });
+        }),
+      ].filter(Boolean),
+    });
+
+    const expandedRow = expandable && isExpanded && expandedRowRender
+      ? ED.createElement('tr', {
+          key: `${key}-expanded`,
+          className: 'ed-bg-gray-50',
+          children: ED.createElement('td', {
+            colSpan: (selectable ? 1 : 0) + (expandable ? 1 : 0) + columns.length,
+            className: 'ed-px-4 ed-py-4',
+            children: expandedRowRender(row, rowIndex),
+          }),
+        })
+      : null;
+
+    return [mainRow, expandedRow].filter(Boolean);
+  };
+
+  const emptyState = data.length === 0
+    ? ED.createElement('tr', null,
+        ED.createElement('td', {
+          colSpan: (selectable ? 1 : 0) + (expandable ? 1 : 0) + columns.length,
+          className: 'ed-px-4 ed-py-12 ed-text-center ed-text-gray-500',
+          children: ED.createElement('div', { className: 'ed-flex ed-flex-col ed-items-center ed-gap-2' },
+            emptyIcon || ED.createElement('svg', {
+              className: 'ed-w-12 ed-h-12 ed-text-gray-300',
+              fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+              children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 1.5, d: 'M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4' }),
+            }),
+            ED.createElement('span', { className: 'ed-text-sm' }, emptyText),
+          ),
+        })
+      )
+    : null;
+
+  const loadingOverlay = loading
+    ? ED.createElement('div', {
+        className: 'ed-absolute ed-inset-0 ed-bg-white ed-bg-opacity-70 ed-flex ed-items-center ed-justify-center ed-z-10',
+        children: ED.createElement('div', {
+          className: 'ed-w-8 ed-h-8 ed-border-4 ed-border-blue-500 ed-border-t-transparent ed-rounded-full ed-animate-spin',
+        }),
+      })
+    : null;
+
+  const paginationElement = pagination && total > pageSize
+    ? ED.createElement('div', {
+        className: 'ed-flex ed-items-center ed-justify-between ed-px-4 ed-py-3 ed-border-t ed-border-gray-200',
+        children: [
+          ED.createElement('span', { className: 'ed-text-sm ed-text-gray-500', key: 'info' },
+            `Showing ${(currentPage - 1) * pageSize + 1}-${Math.min(currentPage * pageSize, total)} of ${total}`
+          ),
+          ED.createElement('div', { className: 'ed-flex ed-items-center ed-gap-2', key: 'controls' },
+            ED.createElement('button', {
+              className: 'ed-px-3 ed-py-1 ed-text-sm ed-border ed-rounded ed-disabled:ed-opacity-50 ed-disabled:ed-cursor-not-allowed hover:ed-bg-gray-50',
+              disabled: currentPage <= 1,
+              onClick: () => onPageChange?.(currentPage - 1),
+            }, 'Previous'),
+            ...Array.from({ length: Math.ceil(total / pageSize) }, (_, i) => i + 1)
+              .filter(p => Math.abs(p - currentPage) <= 2 || p === 1 || p === Math.ceil(total / pageSize))
+              .map((page, idx, arr) => {
+                const prev = arr[idx - 1];
+                const showEllipsis = prev && page - prev > 1;
+                return [
+                  showEllipsis ? ED.createElement('span', { key: `ellipsis-${idx}`, className: 'ed-px-1' }, '...') : null,
+                  ED.createElement('button', {
+                    key: page,
+                    className: [
+                      'ed-px-3 ed-py-1 ed-text-sm ed-border ed-rounded ed-transition-colors',
+                      page === currentPage
+                        ? 'ed-bg-blue-600 ed-text-white ed-border-blue-600'
+                        : 'ed-border-gray-300 hover:ed-bg-gray-50',
+                    ].join(' '),
+                    onClick: () => onPageChange?.(page),
+                  }, page),
+                ];
+              }).flat().filter(Boolean),
+            ED.createElement('button', {
+              className: 'ed-px-3 ed-py-1 ed-text-sm ed-border ed-rounded ed-disabled:ed-opacity-50 ed-disabled:ed-cursor-not-allowed hover:ed-bg-gray-50',
+              disabled: currentPage >= Math.ceil(total / pageSize),
+              onClick: () => onPageChange?.(currentPage + 1),
+            }, 'Next'),
+          ),
+        ],
+      })
+    : null;
+
+  const tableClasses = [
+    'ed-w-full ed-border-collapse',
+    sizeClasses[size] || sizeClasses.default,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const wrapperClasses = [
+    'ed-relative ed-bg-white ed-rounded-lg ed-overflow-hidden ed-border ed-border-gray-200',
+    bordered ? 'ed-border' : 'ed-border ed-border-gray-200',
+  ].filter(Boolean).join(' ');
+
+  return ED.createElement('div', {
+    className: wrapperClasses,
+    style: { position: 'relative', ...style },
+    children: [
+      title
+        ? ED.createElement('div', { key: 'title', className: 'ed-px-4 ed-py-3 ed-border-b ed-border-gray-200 ed-font-semibold ed-text-gray-900' }, title)
+        : null,
+      ED.createElement('div', {
+        key: 'table-wrapper',
+        className: 'ed-overflow-x-auto',
+        style: fixedHeader ? { maxHeight, overflowY: 'auto' } : scrollX ? { overflowX: 'auto' } : {},
+        children: ED.createElement('table', {
+          className: tableClasses,
+          children: [
+            showHeader ? ED.createElement('thead', { key: 'head' }, headerRow) : null,
+            ED.createElement('tbody', { key: 'body' },
+              ...(data.length > 0 ? data.flatMap(renderRow) : [emptyState]).filter(Boolean)
+            ),
+            footer
+              ? ED.createElement('tfoot', { key: 'foot' },
+                  ED.createElement('tr', null,
+                    ED.createElement('td', {
+                      colSpan: (selectable ? 1 : 0) + (expandable ? 1 : 0) + columns.length,
+                      className: 'ed-px-4 ed-py-3 ed-border-t ed-border-gray-200 ed-bg-gray-50',
+                      children: footer,
+                    })
+                  )
+                )
+              : null,
+          ].filter(Boolean),
+        }),
+      }),
+      loadingOverlay,
+      paginationElement,
+    ].filter(Boolean),
+  });
+}
+
+Table.displayName = 'Table';
+
+module.exports = Table;

package/src/jsx/components/Tabs.jsx

@@ -0,0 +1,227 @@
+/**
+ * Tabs Component for ElementDrawing Framework
+ * Supports line, card, pill variants, closable, scrollable, lazy, icons, vertical, animated indicator
+ */
+const ED = require('../core/element');
+
+function TabPane(props) {
+  const {
+    children,
+    tab,
+    key: tabKey,
+    disabled = false,
+    icon,
+    closable = true,
+    forceRender = false,
+    className = '',
+    style = {},
+    lazy = false,
+  } = props;
+
+  return ED.createElement('div', {
+    className: `ed-tab-pane ed-py-3 ${className}`,
+    style,
+    role: 'tabpanel',
+    children,
+  });
+}
+
+TabPane.displayName = 'TabPane';
+
+function Tabs(props) {
+  const {
+    children,
+    activeKey,
+    defaultActiveKey = '0',
+    variant = 'line',
+    onChange,
+    type = variant,
+    closable = false,
+    onClose,
+    onEdit,
+    scrollable = false,
+    lazy = false,
+    vertical = false,
+    animated = true,
+    addable = false,
+    onAdd,
+    hideAdd = false,
+    size = 'md',
+    className = '',
+    style = {},
+    tabBarExtraContent,
+    tabBarGutter = 0,
+    tabBarStyle = {},
+    inkBar = true,
+    items,
+    tabPosition = 'top',
+    destroyInactiveTabPane = false,
+    renderTabBar,
+  } = props;
+
+  const currentVariant = type || variant;
+  const currentActiveKey = activeKey !== undefined ? activeKey : defaultActiveKey;
+
+  const tabItems = items || [];
+  const childPanes = children
+    ? (Array.isArray(children) ? children : [children])
+    : [];
+
+  const allTabs = tabItems.length > 0
+    ? tabItems.map((item, idx) => ({
+        key: item.key || String(idx),
+        label: item.label || item.tab,
+        icon: item.icon,
+        disabled: item.disabled,
+        closable: item.closable !== undefined ? item.closable : closable,
+        content: item.children || item.content,
+      }))
+    : childPanes.map((child, idx) => ({
+        key: child.props?.key || String(idx),
+        label: child.props?.tab,
+        icon: child.props?.icon,
+        disabled: child.props?.disabled,
+        closable: child.props?.closable !== undefined ? child.props?.closable : closable,
+        content: child,
+      }));
+
+  const sizeClasses = {
+    sm: 'ed-text-sm',
+    md: 'ed-text-sm',
+    lg: 'ed-text-base',
+  };
+
+  const variantClasses = {
+    line: {
+      nav: 'ed-border-b ed-border-gray-200',
+      tab: 'ed-px-4 ed-py-2 ed-border-b-2 ed-border-transparent ed-text-gray-500 hover:ed-text-gray-700 hover:ed-border-gray-300',
+      active: 'ed-border-blue-500 ed-text-blue-600 ed-font-medium',
+    },
+    card: {
+      nav: 'ed-border-b ed-border-gray-200 ed--mb-px',
+      tab: 'ed-px-4 ed-py-2 ed-border ed-border-b-0 ed-border-transparent ed-rounded-t-lg ed-text-gray-500 hover:ed-text-gray-700 ed-bg-gray-50',
+      active: 'ed-border-gray-200 ed-border-b-white ed-bg-white ed-text-gray-900 ed-font-medium',
+    },
+    pill: {
+      nav: 'ed-gap-1 ed-bg-gray-100 ed-p-1 ed-rounded-lg',
+      tab: 'ed-px-4 ed-py-1.5 ed-rounded-md ed-text-gray-500 hover:ed-text-gray-700',
+      active: 'ed-bg-white ed-text-gray-900 ed-font-medium ed-shadow-sm',
+    },
+  };
+
+  const currentStyle = variantClasses[currentVariant] || variantClasses.line;
+
+  const navClasses = [
+    'ed-flex ed-items-center',
+    vertical ? 'ed-flex-col ed-border-r ed-border-gray-200' : currentStyle.nav,
+    scrollable ? 'ed-overflow-x-auto' : '',
+    sizeClasses[size] || sizeClasses.md,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const renderTab = (tab, idx) => {
+    const isActive = tab.key === currentActiveKey;
+    const isDisabled = tab.disabled;
+
+    const tabClasses = [
+      'ed-flex ed-items-center ed-gap-1.5 ed-whitespace-nowrap ed-transition-all ed-duration-200 ed-cursor-pointer ed-select-none',
+      currentStyle.tab,
+      isActive ? currentStyle.active : '',
+      isDisabled ? 'ed-opacity-50 ed-cursor-not-allowed ed-pointer-events-none' : '',
+      closable && tab.closable ? 'ed-pr-2' : '',
+    ].filter(Boolean).join(' ');
+
+    const closeBtn = closable && tab.closable
+      ? ED.createElement('button', {
+          key: 'close',
+          className: 'ed-ml-1 ed-p-0.5 ed-rounded ed-text-gray-400 hover:ed-text-red-500 hover:ed-bg-red-50 ed-transition-colors',
+          onClick: (e) => { e.stopPropagation(); onClose?.(tab.key); },
+          'aria-label': 'Close tab',
+          children: ED.createElement('svg', {
+            className: 'ed-w-3.5 ed-h-3.5',
+            fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+            children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M6 18L18 6M6 6l12 12' }),
+          }),
+        })
+      : null;
+
+    return ED.createElement('div', {
+      key: tab.key,
+      className: tabClasses,
+      style: tabBarGutter ? { marginRight: tabBarGutter } : {},
+      role: 'tab',
+      'aria-selected': isActive,
+      tabIndex: isDisabled ? -1 : (isActive ? 0 : -1),
+      onClick: () => { if (!isDisabled) onChange?.(tab.key); },
+      children: [
+        tab.icon
+          ? ED.createElement('span', { key: 'icon', className: 'ed-flex ed-items-center ed-justify-center ed-w-4 ed-h-4' },
+              typeof tab.icon === 'string' ? ED.createElement('i', { className: tab.icon }) : tab.icon
+            )
+          : null,
+        ED.createElement('span', { key: 'label' }, tab.label),
+        closeBtn,
+      ].filter(Boolean),
+    });
+  };
+
+  const addButton = addable && !hideAdd
+    ? ED.createElement('button', {
+        key: 'add',
+        className: 'ed-flex ed-items-center ed-justify-center ed-w-8 ed-h-8 ed-ml-2 ed-rounded-md ed-text-gray-400 hover:ed-text-gray-600 hover:ed-bg-gray-100 ed-transition-colors',
+        onClick: onAdd,
+        'aria-label': 'Add tab',
+        children: ED.createElement('svg', {
+          className: 'ed-w-4 ed-h-4',
+          fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+          children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M12 4v16m8-8H4' }),
+        }),
+      })
+    : null;
+
+  const inkBarElement = inkBar && currentVariant === 'line' && animated
+    ? ED.createElement('div', {
+        className: 'ed-absolute ed-bottom-0 ed-h-0.5 ed-bg-blue-500 ed-transition-all ed-duration-300',
+      })
+    : null;
+
+  const navElement = ED.createElement('div', {
+    className: navClasses,
+    style: { position: 'relative', ...tabBarStyle },
+    role: 'tablist',
+    children: [
+      ...allTabs.map(renderTab),
+      addButton,
+      inkBarElement,
+      tabBarExtraContent
+        ? ED.createElement('div', { key: 'extra', className: 'ed-ml-auto ed-flex ed-items-center' }, tabBarExtraContent)
+        : null,
+    ],
+  });
+
+  const activePane = allTabs.find(t => t.key === currentActiveKey);
+
+  const contentElement = ED.createElement('div', {
+    className: 'ed-tab-content ed-flex-1',
+    role: 'tabpanel',
+    children: activePane ? activePane.content : null,
+  });
+
+  if (vertical) {
+    return ED.createElement('div', {
+      className: 'ed-flex ed-gap-0',
+      style,
+      children: [
+        ED.createElement('div', { key: 'nav', className: 'ed-w-48 ed-flex-shrink-0' }, navElement),
+        ED.createElement('div', { key: 'content', className: 'ed-flex-1 ed-pl-4' }, contentElement),
+      ],
+    });
+  }
+
+  return ED.createElement('div', { className: 'ed-flex ed-flex-col', style, children: [navElement, contentElement] });
+}
+
+Tabs.displayName = 'Tabs';
+Tabs.TabPane = TabPane;
+
+module.exports = Tabs;