aeico-components 0.1.4 → 0.1.6

package/src/detail/index.ts

@@ -1,3 +1,3 @@
 export { default, default as Detail } from './detail';
 export type { DetailProps } from './detail';
-export type { DetailVariant, DetailColor } from './defines';
+export type { DetailVariant, DetailColor, DetailIconPlacement } from './defines';

package/src/detail-group/detail-group.ts

@@ -0,0 +1,104 @@
+import type { InferProps, Props } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import detailGroupStyle from '../styles/components/detail-group.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import type Detail from '../detail/detail';
+import type { DetailColor, DetailVariant } from '../detail/defines';
+
+/**
+ * DetailGroup component — wraps multiple `ae-detail` elements into an
+ * accordion-style group. By default only one item can be open at a time;
+ * set `multiple` to allow several items open simultaneously.
+ *
+ * @example
+ * ```html
+ * <ae-detail-group>
+ *   <ae-detail summary="Section 1">Content 1</ae-detail>
+ *   <ae-detail summary="Section 2">Content 2</ae-detail>
+ *   <ae-detail summary="Section 3">Content 3</ae-detail>
+ * </ae-detail-group>
+ * ```
+ */
+class DetailGroup extends AeicoComponent {
+  static tagName = 'detail-group';
+
+  static props: Props = {
+    multiple: { type: Boolean },
+    variant: { type: String },
+    color: { type: String },
+  };
+
+  protected static styles = [styleVariables, detailGroupStyle];
+
+  declare multiple?: boolean;
+  declare variant?: DetailVariant;
+  declare color?: DetailColor;
+
+  private slotEl: HTMLSlotElement | null = null;
+
+  private readonly DETAIL_RADIUS = 6;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen('open', this._handleOpen);
+  }
+
+  private _getDetails(): Detail[] {
+    if (!this.slotEl) return [];
+    return (this.slotEl.assignedElements({ flatten: true }) as Detail[]).filter(
+      (el) => el.tagName.toLowerCase() === 'ae-detail',
+    );
+  }
+
+  private _syncChildren(): void {
+    const details = this._getDetails();
+    const r = this.DETAIL_RADIUS;
+
+    details.forEach((detail, i) => {
+      const isFirst = i === 0;
+      const isLast = i === details.length - 1;
+
+      // Collapse borders between adjacent items
+      detail.style.marginTop = isFirst ? '' : '-1px';
+
+      // Adjust per-corner radius so only the outer edges of the group keep it
+      detail.style.setProperty('--detail-r-tl', isFirst ? `${r}px` : '0');
+      detail.style.setProperty('--detail-r-tr', isFirst ? `${r}px` : '0');
+      detail.style.setProperty('--detail-r-br', isLast ? `${r}px` : '0');
+      detail.style.setProperty('--detail-r-bl', isLast ? `${r}px` : '0');
+
+      // Propagate variant / color only when explicitly set on the group
+      if (this.variant !== undefined) detail.variant = this.variant;
+      if (this.color !== undefined) detail.color = this.color;
+    });
+  }
+
+  private _handleOpen = (event: Event): void => {
+    if (this.multiple) return;
+    const opened = event.target as Element;
+    this._getDetails().forEach((detail) => {
+      if (detail !== opened) detail.close();
+    });
+  };
+
+  protected render() {
+    return html(({ slot }) => {
+      this.slotEl = slot({
+        '@slotchange': () => this._syncChildren(),
+      });
+      this._syncChildren();
+    });
+  }
+}
+
+DetailGroup.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-detail-group': DetailGroup;
+  }
+}
+
+export default DetailGroup;
+export type DetailGroupProps = InferProps<typeof DetailGroup>;

package/src/detail-group/index.ts

@@ -0,0 +1,2 @@
+export { default, default as DetailGroup } from './detail-group';
+export type { DetailGroupProps } from './detail-group';

package/src/drawer/defines.ts

@@ -0,0 +1 @@
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';

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/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';

package/src/icon/registry.ts

@@ -2,7 +2,10 @@ 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') {
@@ -10,6 +13,25 @@ class IconRegistry {
       } 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, { path: 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,7 +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';
@@ -71,15 +82,36 @@ 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';
 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';