aeico-components 0.1.5 → 0.1.7

package/src/drawer/drawer.ts

@@ -0,0 +1,157 @@
+import type { InferProps } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import style from '../styles/components/drawer.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html, prop } from 'aeico';
+import type { DrawerPlacement } from './defines';
+
+class Drawer extends AeicoComponent {
+  protected static styles = [styleVariables, style];
+
+  @prop({ type: String })
+  accessor label: string | undefined;
+
+  @prop({ type: String })
+  accessor placement: DrawerPlacement | undefined;
+
+  @prop({ type: String })
+  accessor size: string | undefined;
+
+  @prop({ type: Boolean })
+  accessor modal: boolean = true;
+
+  @prop({ type: Boolean })
+  accessor closable: boolean = true;
+
+  @prop({ type: Boolean })
+  accessor header: boolean = true;
+
+  @prop({ type: Boolean })
+  accessor closeOnOverlayClick: boolean = true;
+
+  private _panelEl: HTMLDivElement | null = null;
+  private _hasFooter = false;
+
+  protected render() {
+    const placement = this.placement || 'right';
+    const isVertical = placement === 'top' || placement === 'bottom';
+
+    return html(({ div, header, footer, span, button, slot }) => {
+      // Backdrop (modal only)
+      if (this.modal) {
+        div({ className: 'backdrop', '@click': this._handleBackdropClick });
+      }
+
+      // Panel
+      this._panelEl = div(
+        {
+          className: `panel placement-${placement}`,
+          role: 'dialog',
+          'aria-modal': this.modal ? 'true' : 'false',
+          'aria-label': this.label,
+          tabindex: '-1',
+          '@click': this._handlePanelClick,
+          style: {
+            [isVertical ? 'height' : 'width']: this.size || '',
+          },
+        },
+        () => {
+          // Header
+          if (this.header) {
+            header({}, () => {
+              slot({ name: 'header' }, () => {
+                span({ className: 'label', textContent: this.label || '' });
+              });
+              if (this.closable) {
+                button({
+                  className: 'close-btn',
+                  textContent: '×',
+                  '@click': () => this.close(),
+                });
+              }
+            });
+          }
+
+          // Body
+          div({ className: 'body' }, () => {
+            slot();
+          });
+
+          // Footer — always rendered to capture slotchange, hidden when empty
+          footer({ style: { display: this._hasFooter ? '' : 'none' } }, () => {
+            slot({ name: 'footer', '@slotchange': this._handleFooterSlotChange });
+          });
+        },
+      );
+    });
+  }
+
+  private _handleBackdropClick = () => {
+    if (this.closeOnOverlayClick) {
+      this.close();
+    }
+  };
+
+  private _handlePanelClick = (e: Event) => {
+    const path = (e as MouseEvent).composedPath();
+    for (const el of path) {
+      if (el instanceof Element && el.hasAttribute('data-close')) {
+        this.close();
+        return;
+      }
+      if (el === this._panelEl) break;
+    }
+  };
+
+  private _handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      this.close();
+    }
+  };
+
+  private _handleFooterSlotChange = (e: Event) => {
+    const slotEl = e.target as HTMLSlotElement;
+    const hasContent = slotEl.assignedElements().length > 0;
+    if (hasContent !== this._hasFooter) {
+      this._hasFooter = hasContent;
+      this.update();
+    }
+  };
+
+  open() {
+    this.setAttribute('data-open', '');
+    document.addEventListener('keydown', this._handleKeydown);
+    requestAnimationFrame(() => {
+      const btn = this.shadowRoot?.querySelector<HTMLElement>('.close-btn');
+      (btn ?? this._panelEl)?.focus();
+    });
+    this.emit('open', { detail: { target: this } });
+  }
+
+  close() {
+    this.removeAttribute('data-open');
+    document.removeEventListener('keydown', this._handleKeydown);
+    this.emit('close', { detail: { target: this } });
+  }
+
+  isOpen(): boolean {
+    return this.hasAttribute('data-open');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('keydown', this._handleKeydown);
+  }
+}
+
+Drawer.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-drawer': Drawer;
+  }
+}
+
+export default Drawer;
+export type DrawerProps = InferProps<typeof Drawer>;

package/src/drawer/index.ts

@@ -0,0 +1,3 @@
+export { default, default as Drawer } from './drawer';
+export type { DrawerProps } from './drawer';
+export type { DrawerPlacement } from './defines';

package/src/icon/built-in-icons.ts

@@ -0,0 +1,21 @@
+/**
+ * Built-in system icons used internally by aeico components.
+ * These are pre-registered so components work out of the box.
+ * Users can override any of them by calling IconRegistry.add({ 'name': '...' }).
+ *
+ * All paths use the Material Design 24×24 viewBox.
+ */
+import IconRegistry from './registry';
+
+IconRegistry.addBuiltIn({
+  copy: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',
+  check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z',
+  'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z',
+  'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z',
+  'chevron-up': 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z',
+  'chevron-down': 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z',
+  'chevrons-left': 'M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z',
+  'chevrons-right': 'M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z',
+  close:
+    'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+});

package/src/icon/defines.ts

@@ -9,8 +9,13 @@ export type IconColor =
   | 'warning'
   | 'info';
 
+export interface IconPathDef {
+  d: string;
+  fill?: string;
+}
+
 export interface IconDefinition {
-  path: string;
+  paths: string | IconPathDef[];
   viewBox?: string;
   stroke?: boolean;
   strokeWidth?: number;

package/src/icon/icon.ts

@@ -9,6 +9,7 @@ import style from '../styles/components/icon.css?inline';
 import type { IconSize, IconColor } from './defines';
 import { defaultViewBox } from './defines';
 import IconRegistry from './registry';
+import './built-in-icons';
 
 class Icon extends AeicoComponent {
   static tagName = 'icon';
@@ -40,22 +41,32 @@ class Icon extends AeicoComponent {
       this.style.removeProperty('font-size');
     }
 
-    // Resolve stroke: component prop takes priority over registry definition
-    const useStroke = this.stroke ?? def?.stroke ?? false;
-    const useStrokeWidth = this.strokeWidth ?? def?.strokeWidth ?? 2;
+    if (!def) return;
+
+    const { paths } = def;
+    const isMultiPath = Array.isArray(paths);
+
+    // Stroke CSS variables only apply in single-path mode (component props)
+    if (!isMultiPath) {
+      const useStroke =
+        this.stroke ?? (this.strokeWidth !== undefined ? true : (def.stroke ?? false));
+      const useStrokeWidth = this.strokeWidth ?? def.strokeWidth ?? 2;
 
-    if (useStroke) {
-      this.style.setProperty('--icon-fill', 'none');
-      this.style.setProperty('--icon-stroke', 'currentColor');
-      this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));
+      if (useStroke) {
+        this.style.setProperty('--icon-fill', 'none');
+        this.style.setProperty('--icon-stroke', 'currentColor');
+        this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));
+      } else {
+        this.style.removeProperty('--icon-fill');
+        this.style.removeProperty('--icon-stroke');
+        this.style.removeProperty('--icon-stroke-width');
+      }
     } else {
       this.style.removeProperty('--icon-fill');
       this.style.removeProperty('--icon-stroke');
       this.style.removeProperty('--icon-stroke-width');
     }
 
-    if (!def) return;
-
     return html(({ svg, path }) => {
       svg(
         {
@@ -65,7 +76,15 @@ class Icon extends AeicoComponent {
           xmlns: SVG_NS,
         },
         () => {
-          path({ d: def.path });
+          if (typeof paths === 'string') {
+            path({ d: paths });
+          } else {
+            for (const p of paths) {
+              const attrs: Record<string, unknown> = { d: p.d };
+              if (p.fill) attrs.style = { fill: p.fill };
+              path(attrs);
+            }
+          }
         },
       );
     });

package/src/icon/index.ts

@@ -1,4 +1,4 @@
 export { default as Icon } from './icon';
 export type { IconProps } from './icon';
 export { default as IconRegistry } from './registry';
-export type { IconSize, IconColor, IconDefinition, IconRegistryData } from './defines';
+export type { IconSize, IconColor, IconDefinition, IconPathDef, IconRegistryData } from './defines';

package/src/icon/registry.ts

@@ -2,14 +2,36 @@ import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';
 
 class IconRegistry {
   private static _icons: Map<string, IconDefinition> = new Map();
+  /** Names registered via addBuiltIn — can be overridden by user add() calls */
+  private static _builtInKeys: Set<string> = new Set();
 
+  /** Register user icons. Always takes priority over built-in icons. */
   static add(icons: IconRegistryData) {
     for (const [name, data] of Object.entries(icons)) {
       if (typeof data === 'string') {
-        this._icons.set(name, { path: data, viewBox: defaultViewBox });
+        this._icons.set(name, { paths: data, viewBox: defaultViewBox });
       } else {
         this._icons.set(name, data);
       }
+      // Mark as user-defined (removes built-in status)
+      this._builtInKeys.delete(name);
+    }
+  }
+
+  /**
+   * Register built-in icons provided by the library.
+   * A built-in icon will NOT overwrite an icon already registered by the user.
+   */
+  static addBuiltIn(icons: IconRegistryData) {
+    for (const [name, data] of Object.entries(icons)) {
+      // Skip if the user has already registered this icon
+      if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;
+      if (typeof data === 'string') {
+        this._icons.set(name, { paths: data, viewBox: defaultViewBox });
+      } else {
+        this._icons.set(name, data);
+      }
+      this._builtInKeys.add(name);
     }
   }
 

package/src/index.ts

@@ -33,6 +33,8 @@
 
 // Field components
 export { default as TextInput } from './text-input';
+export { default as NumberInput } from './number-input';
+export { default as Textarea, type TextareaResize } from './textarea';
 export { default as Select } from './select';
 export { default as Slider } from './slider';
 export { default as Checkbox } from './checkbox';
@@ -43,12 +45,14 @@ export { default as Switch } from './switch';
 // UI components
 export { default as Breadcrumb, BreadcrumbItem } from './breadcrumb';
 export { default as Button } from './button';
+export { default as CopyButton } from './copy-button';
 export { default as Dropdown, DropdownItem, DropdownButton } from './dropdown';
 export { default as ButtonGroup } from './button-group';
 export { default as Badge } from './badge';
 export { default as Tag } from './tag';
 export { default as Alert } from './alert';
 export { default as Dialog } from './dialog';
+export { default as Drawer } from './drawer';
 export { default as Icon } from './icon/icon';
 export { default as IconRegistry } from './icon/registry';
 export { default as IconButton } from './icon-button';
@@ -56,8 +60,14 @@ export { Tabs, Tab, TabPanel } from './tabs';
 export { default as Divider } from './divider';
 export { default as Card } from './card';
 export { default as Navbar } from './navbar';
+export { default as Spinner } from './spinner';
 export { default as Detail } from './detail';
+export { default as DetailGroup } from './detail-group';
 export { default as ProgressBar } from './progress-bar';
+export { Menu, MenuItem } from './menu';
+export { default as Tooltip } from './tooltip';
+export { default as Pagination } from './pagination';
+export { Tree, TreeItem } from './tree';
 
 // Component types
 export type { SelectProps, SelectOption, SelectOptions, SelectOptionValue } from './select';
@@ -72,12 +82,16 @@ export type {
 export type { RadioProps } from './radio-group';
 export type { SwitchProps } from './switch';
 export type { TextInputProps } from './text-input';
+export type { NumberInputProps } from './number-input';
+export type { TextareaProps } from './textarea';
 export type { ButtonProps, ButtonColor, ButtonSize, ButtonVariant } from './button';
 export type { ButtonGroupProps } from './button-group';
+export type { PaginationProps, PaginationSize } from './pagination';
 export type { AlertProps, AlertColor, AlertSize, AlertVariant } from './alert';
 export type { BadgeProps, BadgeColor, BadgeSize, BadgeVariant } from './badge';
 export type { TagProps, TagColor, TagSize, TagVariant } from './tag';
 export type { DialogProps } from './dialog';
+export type { DrawerProps, DrawerPlacement } from './drawer';
 export type { IconProps, IconSize, IconColor, IconDefinition, IconRegistryData } from './icon';
 export type { ProgressBarProps, ProgressBarColor } from './progress-bar';
 export type { IconButtonProps, IconButtonVariant, IconButtonSize } from './icon-button';
@@ -85,3 +99,19 @@ export type { DividerProps } from './divider';
 export type { CardProps, CardVariant, CardColor } from './card';
 export type { NavbarProps, NavbarColor, NavbarAppearance } from './navbar';
 export type { DetailProps, DetailVariant, DetailColor } from './detail';
+export type {
+  MenuProps,
+  MenuItemProps,
+  MenuMode,
+  MenuOrientation,
+  MenuTrigger,
+  MenuSelectDetail,
+} from './menu';
+export type { TooltipProps, TooltipPlacement, TooltipTrigger } from './tooltip';
+export type {
+  TreeProps,
+  TreeItemProps,
+  TreeSelectDetail,
+  TreeExpandDetail,
+  TreeCheckDetail,
+} from './tree';

package/src/menu/defines.ts

@@ -0,0 +1,17 @@
+export type MenuMode = 'flyout' | 'inline';
+export type MenuOrientation = 'horizontal' | 'vertical';
+export type MenuTrigger = 'click' | 'hover';
+export type MenuIconPlacement = 'start' | 'end';
+
+/** Minimal interface used by menu-item to read config from its parent ae-menu. */
+export interface ParentMenuLike extends Element {
+  mode?: MenuMode;
+  orientation?: MenuOrientation;
+  trigger?: MenuTrigger;
+}
+
+export interface MenuSelectDetail {
+  key: string;
+  label: string;
+  keyPath: string[];
+}

package/src/menu/index.ts

@@ -0,0 +1,5 @@
+export { default as Menu } from './menu';
+export { default as MenuItem } from './menu-item';
+export type { MenuProps } from './menu';
+export type { MenuItemProps } from './menu-item';
+export type { MenuMode, MenuOrientation, MenuTrigger, MenuSelectDetail } from './defines';