elementdrawing 1.0.0

package/src/jsx/components/Menu.jsx

@@ -0,0 +1,276 @@
+/**
+ * Menu Component for ElementDrawing Framework
+ * Supports items, submenus, icons, shortcuts, dividers, groups, selectable, active, compact
+ */
+const ED = require('../core/element');
+
+function MenuItem(props) {
+  const {
+    children,
+    label,
+    icon,
+    shortcut,
+    disabled = false,
+    active = false,
+    selected = false,
+    danger = false,
+    href,
+    onClick,
+    className = '',
+    style = {},
+    indent = 0,
+    compact = false,
+    level = 0,
+  } = props;
+
+  const itemClasses = [
+    'ed-flex ed-items-center ed-w-full ed-px-3 ed-text-sm ed-transition-colors ed-duration-150 ed-gap-2',
+    compact ? 'ed-py-1' : 'ed-py-2',
+    disabled
+      ? 'ed-text-gray-400 ed-cursor-not-allowed'
+      : danger
+        ? 'ed-text-red-600 hover:ed-bg-red-50 ed-cursor-pointer'
+        : active || selected
+          ? 'ed-bg-blue-50 ed-text-blue-700 ed-font-medium ed-cursor-pointer'
+          : 'ed-text-gray-700 hover:ed-bg-gray-50 ed-cursor-pointer',
+    'ed-rounded-md',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const iconElement = icon
+    ? ED.createElement('span', {
+        className: 'ed-w-4 ed-h-4 ed-flex ed-items-center ed-justify-center ed-flex-shrink-0',
+        children: typeof icon === 'string' ? ED.createElement('i', { className: icon }) : icon,
+      })
+    : null;
+
+  const shortcutElement = shortcut
+    ? ED.createElement('span', {
+        className: 'ed-ml-auto ed-text-xs ed-text-gray-400 ed-font-mono',
+      }, shortcut)
+    : null;
+
+  const labelContent = label || children;
+
+  if (href && !disabled) {
+    return ED.createElement('a', {
+      href,
+      className: itemClasses,
+      style: { paddingLeft: `${indent + 12}px`, ...style },
+      onClick: disabled ? undefined : onClick,
+      role: 'menuitem',
+      tabIndex: disabled ? -1 : 0,
+      children: [iconElement, ED.createElement('span', { key: 'label', className: 'ed-flex-1' }, labelContent), shortcutElement].filter(Boolean),
+    });
+  }
+
+  return ED.createElement('div', {
+    className: itemClasses,
+    style: { paddingLeft: `${indent + 12}px`, ...style },
+    onClick: disabled ? undefined : onClick,
+    role: 'menuitem',
+    tabIndex: disabled ? -1 : 0,
+    'aria-disabled': disabled,
+    onKeyDown: (e) => {
+      if (e.key === 'Enter' && !disabled) onClick?.(e);
+    },
+    children: [iconElement, ED.createElement('span', { key: 'label', className: 'ed-flex-1' }, labelContent), shortcutElement].filter(Boolean),
+  });
+}
+
+MenuItem.displayName = 'MenuItem';
+
+function MenuGroup(props) {
+  const {
+    children,
+    title,
+    className = '',
+    style = {},
+  } = props;
+
+  return ED.createElement('div', {
+    className: `ed-py-1 ${className}`,
+    style,
+    role: 'group',
+    'aria-label': title,
+    children: [
+      title
+        ? ED.createElement('div', {
+            key: 'title',
+            className: 'ed-px-3 ed-py-1.5 ed-text-xs ed-font-semibold ed-text-gray-400 ed-uppercase ed-tracking-wider',
+          }, title)
+        : null,
+      children,
+    ].filter(Boolean),
+  });
+}
+
+MenuGroup.displayName = 'MenuGroup';
+
+function MenuDivider() {
+  return ED.createElement('div', {
+    className: 'ed-my-1 ed-border-t ed-border-gray-100',
+    role: 'separator',
+  });
+}
+
+MenuDivider.displayName = 'MenuDivider';
+
+function SubMenu(props) {
+  const {
+    children,
+    label,
+    icon,
+    disabled = false,
+    expanded = false,
+    onToggle,
+    className = '',
+    style = {},
+    level = 0,
+    compact = false,
+  } = props;
+
+  const itemClasses = [
+    'ed-flex ed-items-center ed-w-full ed-px-3 ed-text-sm ed-transition-colors ed-duration-150 ed-gap-2',
+    compact ? 'ed-py-1' : 'ed-py-2',
+    disabled
+      ? 'ed-text-gray-400 ed-cursor-not-allowed'
+      : 'ed-text-gray-700 hover:ed-bg-gray-50 ed-cursor-pointer',
+    'ed-rounded-md',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return ED.createElement('div', null, [
+    ED.createElement('div', {
+      key: 'header',
+      className: itemClasses,
+      style: { paddingLeft: `${level * 16 + 12}px`, ...style },
+      onClick: disabled ? undefined : onToggle,
+      'aria-expanded': expanded,
+      role: 'menuitem',
+      'aria-haspopup': 'true',
+      tabIndex: disabled ? -1 : 0,
+      children: [
+        icon
+          ? ED.createElement('span', {
+              key: 'icon',
+              className: 'ed-w-4 ed-h-4 ed-flex ed-items-center ed-justify-center ed-flex-shrink-0',
+              children: typeof icon === 'string' ? ED.createElement('i', { className: icon }) : icon,
+            })
+          : null,
+        ED.createElement('span', { key: 'label', className: 'ed-flex-1' }, label),
+        ED.createElement('svg', {
+          key: 'arrow',
+          className: `ed-w-4 ed-h-4 ed-text-gray-400 ed-transition-transform ed-duration-200 ${expanded ? 'ed-rotate-90' : ''}`,
+          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' }),
+        }),
+      ],
+    }),
+    expanded
+      ? ED.createElement('div', {
+          key: 'content',
+          className: 'ed-overflow-hidden',
+          role: 'menu',
+          children,
+        })
+      : null,
+  ]);
+}
+
+SubMenu.displayName = 'SubMenu';
+
+function Menu(props) {
+  const {
+    children,
+    items = [],
+    mode = 'vertical',
+    selectedKey,
+    onSelect,
+    expandedKeys = [],
+    onExpand,
+    compact = false,
+    className = '',
+    style = {},
+    theme = 'light',
+    bordered = true,
+    width = 256,
+    inlineCollapsed = false,
+    selectable = true,
+    multiple = false,
+    defaultSelectedKey,
+    defaultOpenKeys = [],
+    onClick,
+  } = props;
+
+  const isDark = theme === 'dark';
+
+  const menuClasses = [
+    'ed-py-1 ed-min-w-0',
+    isDark ? 'ed-bg-gray-900 ed-text-gray-100' : 'ed-bg-white ed-text-gray-800',
+    bordered ? 'ed-border ed-border-gray-200 ed-rounded-lg' : '',
+    mode === 'horizontal' ? 'ed-flex ed-items-center' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const renderItems = (menuItems, level = 0) =>
+    menuItems.map((item, idx) => {
+      if (item.divider) return ED.createElement(MenuDivider, { key: item.key || idx });
+
+      if (item.group) {
+        return ED.createElement(MenuGroup, {
+          key: item.key || idx,
+          title: item.title || item.label,
+          children: renderItems(item.children || [], level),
+        });
+      }
+
+      if (item.children && item.children.length > 0) {
+        return ED.createElement(SubMenu, {
+          key: item.key || idx,
+          label: item.label,
+          icon: item.icon,
+          disabled: item.disabled,
+          expanded: expandedKeys.includes(item.key),
+          onToggle: () => onExpand?.(item.key),
+          level,
+          compact,
+          children: renderItems(item.children, level + 1),
+        });
+      }
+
+      return ED.createElement(MenuItem, {
+        key: item.key || idx,
+        label: item.label,
+        icon: item.icon,
+        shortcut: item.shortcut,
+        disabled: item.disabled,
+        active: selectable && selectedKey === item.key,
+        selected: selectable && selectedKey === item.key,
+        danger: item.danger,
+        href: item.href,
+        indent: level * 16,
+        compact,
+        level,
+        onClick: () => {
+          onSelect?.(item);
+          onClick?.(item);
+        },
+      });
+    });
+
+  return ED.createElement('div', {
+    className: menuClasses,
+    style: { width, ...style },
+    role: 'menu',
+    children: items.length > 0 ? renderItems(items) : children,
+  });
+}
+
+Menu.displayName = 'Menu';
+Menu.Item = MenuItem;
+Menu.Group = MenuGroup;
+Menu.Divider = MenuDivider;
+Menu.SubMenu = SubMenu;
+
+module.exports = Menu;

package/src/jsx/components/Modal.jsx

@@ -0,0 +1,274 @@
+/**
+ * Modal Component for ElementDrawing Framework
+ * Supports backdrop, sizes, animations, close button, sections, confirmation, scrollable, portal
+ */
+const ED = require('../core/element');
+
+const MODAL_SIZES = {
+  sm: 'ed-max-w-sm',
+  md: 'ed-max-w-md',
+  lg: 'ed-max-w-lg',
+  xl: 'ed-max-w-xl',
+  full: 'ed-max-w-full ed-mx-4 ed-h-full ed-flex ed-items-stretch',
+};
+
+const ANIMATIONS = {
+  fade: { enter: 'ed-animate-fade-in', leave: 'ed-animate-fade-out' },
+  zoom: { enter: 'ed-animate-zoom-in', leave: 'ed-animate-zoom-out' },
+  slideUp: { enter: 'ed-animate-slide-up', leave: 'ed-animate-slide-down' },
+  slideDown: { enter: 'ed-animate-slide-down', leave: 'ed-animate-slide-up' },
+  slideLeft: { enter: 'ed-animate-slide-left', leave: 'ed-animate-slide-right' },
+  slideRight: { enter: 'ed-animate-slide-right', leave: 'ed-animate-slide-left' },
+};
+
+function ModalHeader(props) {
+  const {
+    children,
+    title,
+    onClose,
+    closable = true,
+    className = '',
+    style = {},
+  } = props;
+
+  return ED.createElement('div', {
+    className: [
+      'ed-flex ed-items-center ed-justify-between ed-px-6 ed-py-4 ed-border-b ed-border-gray-200',
+      'ed-modal-header',
+      className,
+    ].filter(Boolean).join(' '),
+    style,
+    children: [
+      title
+        ? ED.createElement('h3', {
+            key: 'title',
+            className: 'ed-text-lg ed-font-semibold ed-text-gray-900',
+          }, title)
+        : ED.createElement('div', { key: 'title-content' }, children),
+      closable
+        ? ED.createElement('button', {
+            key: 'close',
+            className: 'ed-ml-4 ed-p-1 ed-rounded-md ed-text-gray-400 hover:ed-text-gray-600 hover:ed-bg-gray-100 ed-transition-colors ed-focus:outline-none',
+            onClick: onClose,
+            'aria-label': 'Close modal',
+            type: 'button',
+            children: ED.createElement('svg', {
+              className: 'ed-w-5 ed-h-5',
+              fill: 'none',
+              viewBox: '0 0 24 24',
+              stroke: 'currentColor',
+              strokeWidth: 2,
+              children: ED.createElement('path', {
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round',
+                d: 'M6 18L18 6M6 6l12 12',
+              }),
+            }),
+          })
+        : null,
+    ].filter(Boolean),
+  });
+}
+
+ModalHeader.displayName = 'ModalHeader';
+
+function ModalBody(props) {
+  const {
+    children,
+    className = '',
+    style = {},
+    scrollable = false,
+  } = props;
+
+  return ED.createElement('div', {
+    className: [
+      'ed-px-6 ed-py-4',
+      scrollable ? 'ed-overflow-y-auto ed-max-h-[60vh]' : '',
+      'ed-modal-body',
+      className,
+    ].filter(Boolean).join(' '),
+    style,
+    children,
+  });
+}
+
+ModalBody.displayName = 'ModalBody';
+
+function ModalFooter(props) {
+  const {
+    children,
+    className = '',
+    style = {},
+    align = 'right',
+    bordered = true,
+  } = props;
+
+  const alignClass = {
+    left: 'ed-justify-start',
+    center: 'ed-justify-center',
+    right: 'ed-justify-end',
+    between: 'ed-justify-between',
+  }[align] || 'ed-justify-end';
+
+  return ED.createElement('div', {
+    className: [
+      'ed-px-6 ed-py-3 ed-flex ed-items-center ed-gap-3',
+      bordered ? 'ed-border-t ed-border-gray-200' : '',
+      alignClass,
+      'ed-modal-footer',
+      className,
+    ].filter(Boolean).join(' '),
+    style,
+    children,
+  });
+}
+
+ModalFooter.displayName = 'ModalFooter';
+
+function Modal(props) {
+  const {
+    children,
+    visible = false,
+    onClose,
+    title,
+    size = 'md',
+    animation = 'zoom',
+    closable = true,
+    closeOnBackdrop = true,
+    closeOnEscape = true,
+    backdrop = true,
+    backdropClassName = '',
+    className = '',
+    style = {},
+    footer,
+    header,
+    centered = true,
+    scrollable = false,
+    destroyOnClose = false,
+    portal = false,
+    portalTarget,
+    confirmLoading = false,
+    okText = 'OK',
+    cancelText = 'Cancel',
+    onOk,
+    onCancel,
+    showCancel = true,
+    width,
+    zIndex = 1000,
+    afterClose,
+    maskStyle,
+  } = props;
+
+  if (!visible && destroyOnClose) return null;
+  if (!visible) return null;
+
+  const sizeClass = MODAL_SIZES[size] || MODAL_SIZES.md;
+  const anim = ANIMATIONS[animation] || ANIMATIONS.zoom;
+
+  const backdropClasses = [
+    'ed-fixed ed-inset-0 ed-z-50 ed-flex',
+    centered ? 'ed-items-center ed-justify-center' : 'ed-items-start ed-justify-center ed-pt-16',
+    backdrop ? 'ed-bg-black ed-bg-opacity-50' : '',
+    anim.enter,
+    'ed-modal-backdrop',
+    backdropClassName,
+  ].filter(Boolean).join(' ');
+
+  const modalClasses = [
+    'ed-bg-white ed-rounded-lg ed-shadow-xl ed-w-full',
+    sizeClass,
+    'ed-relative ed-flex ed-flex-col',
+    'ed-modal-content',
+    anim.enter,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const handleBackdropClick = (e) => {
+    if (closeOnBackdrop && e.target === e.currentTarget) {
+      onClose?.();
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (closeOnEscape && e.key === 'Escape') {
+      onClose?.();
+    }
+  };
+
+  const headerElement = header !== undefined ? header
+    : (title || closable)
+      ? ED.createElement(ModalHeader, {
+          title,
+          closable,
+          onClose,
+        })
+      : null;
+
+  const bodyElement = ED.createElement(ModalBody, {
+    scrollable,
+    children,
+  });
+
+  const footerElement = footer !== undefined ? footer
+    : (onOk || onCancel)
+      ? ED.createElement(ModalFooter, null,
+          showCancel
+            ? ED.createElement('button', {
+                key: 'cancel',
+                className: 'ed-px-4 ed-py-2 ed-text-sm ed-font-medium ed-text-gray-700 ed-bg-white ed-border ed-border-gray-300 ed-rounded-md hover:ed-bg-gray-50 ed-transition-colors',
+                onClick: onCancel || onClose,
+                children: cancelText,
+              })
+            : null,
+          ED.createElement('button', {
+            key: 'ok',
+            className: [
+              'ed-px-4 ed-py-2 ed-text-sm ed-font-medium ed-text-white ed-bg-blue-600 ed-rounded-md',
+              'hover:ed-bg-blue-700 ed-transition-colors',
+              confirmLoading ? 'ed-opacity-70 ed-cursor-not-allowed' : '',
+            ].filter(Boolean).join(' '),
+            onClick: onOk,
+            disabled: confirmLoading,
+            children: confirmLoading
+              ? ED.createElement('span', { className: 'ed-flex ed-items-center ed-gap-2' },
+                  ED.createElement('span', { className: 'ed-w-4 ed-h-4 ed-border-2 ed-border-white ed-border-t-transparent ed-rounded-full ed-animate-spin' }),
+                  okText
+                )
+              : okText,
+          })
+        )
+      : null;
+
+  const modalContent = ED.createElement('div', {
+    className: backdropClasses,
+    style: { zIndex, ...maskStyle },
+    onClick: handleBackdropClick,
+    onKeyDown: handleKeyDown,
+    tabIndex: -1,
+    role: 'dialog',
+    'aria-modal': 'true',
+    'aria-labelledby': title ? 'modal-title' : undefined,
+    children: ED.createElement('div', {
+      className: modalClasses,
+      style: width ? { maxWidth: width, ...style } : style,
+      role: 'document',
+      children: [headerElement, bodyElement, footerElement].filter(Boolean),
+    }),
+  });
+
+  if (portal && typeof document !== 'undefined') {
+    const target = portalTarget || document.body;
+    return ED.createElement('portal', { target, children: modalContent });
+  }
+
+  return modalContent;
+}
+
+Modal.displayName = 'Modal';
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+Modal.SIZES = MODAL_SIZES;
+Modal.ANIMATIONS = ANIMATIONS;
+
+module.exports = Modal;