aeico-components 0.1.4 → 0.1.6

package/src/text-input/text-input.ts

@@ -3,6 +3,8 @@ import type { InferProps, Props } from 'aeico';
 import { html } from 'aeico';
 import variables from '../styles/variables.css?inline';
 import sizeCSS from '../styles/size.css?inline';
+import fieldLabelCSS from '../styles/components/field-label.css?inline';
+import actionButtonCSS from '../styles/components/action-button.css?inline';
 import style from '../styles/components/text-input.css?inline';
 
 class TextInput extends AeicoField {
@@ -18,37 +20,32 @@ class TextInput extends AeicoField {
   declare placeholder?: string;
   declare type?: string;
 
-  protected static styles = [variables, sizeCSS, style];
+  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];
 
   render() {
     return html(({ div, input }) => {
-      div({ className: 'input-container' }, () => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: 'input-container field-body' }, () => {
         this.fieldElement = input({
+          id,
           type: this.type || 'text',
           placeholder: this.placeholder || '',
+          required: Boolean(this.required),
           '@input': this.boundOnChange,
         });
 
         this.renderActionButtons();
       });
+      this.renderHelperText();
+      this.renderError();
 
       if (this.fieldElement && this.value != null) {
         this.fieldElement.value = String(this.value);
       }
-      this.updateClearButtonVisibility();
     });
   }
 
-  /**
-   * Update clear button visibility based on input value
-   */
-  private updateClearButtonVisibility() {
-    if (this.clearBtn && this.fieldElement) {
-      const hasValue = this.fieldElement.value.length > 0;
-      this.clearBtn.style.display = hasValue ? '' : 'none';
-    }
-  }
-
   /**
    * Write value to the input element (DOM only)
    */
@@ -58,8 +55,6 @@ class TextInput extends AeicoField {
     if (this.fieldElement) {
       this.fieldElement.value = strValue;
     }
-
-    this.updateClearButtonVisibility();
   }
 }
 

package/src/textarea/index.ts

@@ -0,0 +1 @@
+export { default, type TextareaProps, type TextareaResize } from './textarea';

package/src/textarea/textarea.ts

@@ -0,0 +1,107 @@
+import AeicoField from '../aeico-field';
+import type { InferProps } from 'aeico';
+import { html, prop } from 'aeico';
+import variables from '../styles/variables.css?inline';
+import sizeCSS from '../styles/size.css?inline';
+import fieldLabelCSS from '../styles/components/field-label.css?inline';
+import actionButtonCSS from '../styles/components/action-button.css?inline';
+import style from '../styles/components/textarea.css?inline';
+
+export type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
+
+class Textarea extends AeicoField {
+  protected fieldElement: HTMLTextAreaElement | null = null;
+
+  static tagName = 'textarea';
+
+  @prop({ type: String })
+  accessor placeholder: string | undefined;
+
+  @prop({ type: Number })
+  accessor rows: number | undefined;
+
+  @prop({ type: Number })
+  accessor maxlength: number | undefined;
+
+  @prop({ type: Number })
+  accessor minlength: number | undefined;
+
+  @prop({ type: String })
+  accessor resize: TextareaResize | undefined;
+
+  @prop({ type: Boolean })
+  accessor autoResize: boolean = false;
+
+  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];
+
+  private readonly _boundOnInput = () => {
+    if (this.autoResize && this.fieldElement) {
+      this._syncAutoResize(this.fieldElement);
+    }
+    this.setValue(this.getValue(), { silent: false, action: 'change' });
+  };
+
+  render() {
+    return html(({ div, textarea }) => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: 'textarea-container field-body' }, () => {
+        this.fieldElement = textarea({
+          id,
+          placeholder: this.placeholder || '',
+          rows: this.rows ?? 3,
+          required: Boolean(this.required),
+          '@input': this._boundOnInput,
+        });
+        this.renderActionButtons();
+      });
+      this.renderHelperText();
+      this.renderError();
+
+      if (this.fieldElement) {
+        if (this.value != null) {
+          this.fieldElement.value = String(this.value);
+        }
+        if (this.maxlength != null) this.fieldElement.maxLength = this.maxlength;
+        if (this.minlength != null) this.fieldElement.minLength = this.minlength;
+        this.fieldElement.style.resize = this.autoResize ? 'none' : (this.resize ?? 'vertical');
+        if (this.autoResize) {
+          this._syncAutoResize(this.fieldElement);
+        }
+        this._updateClearButtonVisibility();
+      }
+    });
+  }
+
+  private _syncAutoResize(ta: HTMLTextAreaElement): void {
+    ta.style.height = 'auto';
+    ta.style.height = `${ta.scrollHeight}px`;
+  }
+
+  private _updateClearButtonVisibility(): void {
+    if (this.clearBtn && this.fieldElement) {
+      this.clearBtn.style.display = this.fieldElement.value.length > 0 ? '' : 'none';
+    }
+  }
+
+  protected writeValue(value: string): void {
+    if (this.fieldElement) {
+      this.fieldElement.value = String(value || '');
+      if (this.autoResize) {
+        this._syncAutoResize(this.fieldElement);
+      }
+      this._updateClearButtonVisibility();
+    }
+  }
+}
+
+Textarea.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-textarea': Textarea;
+  }
+}
+
+export default Textarea;
+export type TextareaProps = InferProps<typeof Textarea>;

package/src/tooltip/defines.ts

@@ -0,0 +1,11 @@
+export type TooltipPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'right';
+
+export type TooltipTrigger = 'hover' | 'click';

package/src/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default } from './tooltip';
+export { default as Tooltip } from './tooltip';
+export type { TooltipProps } from './tooltip';
+export type { TooltipPlacement, TooltipTrigger } from './defines';

package/src/tooltip/tooltip.ts

@@ -0,0 +1,183 @@
+import type { InferProps } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import tooltipStyle from '../styles/components/tooltip.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html, prop } from 'aeico';
+import type { TooltipPlacement, TooltipTrigger } from './defines';
+
+/**
+ * Tooltip Component
+ *
+ * A floating label that appears on hover or focus around its trigger content.
+ * Wrap any element in `<ae-tooltip>` and provide content via the `content`
+ * attribute (plain text) or the `tooltip` named slot (rich HTML).
+ *
+ * @example
+ * ```html
+ * <ae-tooltip content="Save file">
+ *   <ae-button>Save</ae-button>
+ * </ae-tooltip>
+ *
+ * <ae-tooltip placement="bottom-start">
+ *   <span slot="tooltip"><strong>Bold</strong> tip</span>
+ *   <ae-icon-button name="info"></ae-icon-button>
+ * </ae-tooltip>
+ * ```
+ */
+class Tooltip extends AeicoComponent {
+  protected static styles = [styleVariables, tooltipStyle];
+
+  @prop({ type: String })
+  accessor content: string | undefined;
+
+  @prop({ type: String })
+  accessor placement: TooltipPlacement = 'top';
+
+  @prop({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  @prop({ type: String })
+  accessor trigger: TooltipTrigger = 'hover';
+
+  @prop({ type: Boolean })
+  accessor open: boolean = false;
+
+  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen('mouseenter', this._handleMouseEnter);
+    this.listen('mouseleave', this._handleMouseLeave);
+    this.listen('focusin', this._handleFocusin);
+    this.listen('focusout', this._handleFocusout);
+    this.listen('click', this._handleClick);
+
+    this._outsideClickHandler = (e: MouseEvent) => {
+      if (!this.open) return;
+      if (!e.composedPath().includes(this)) this.open = false;
+    };
+    document.addEventListener('click', this._outsideClickHandler);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._outsideClickHandler) {
+      document.removeEventListener('click', this._outsideClickHandler);
+      this._outsideClickHandler = null;
+    }
+  }
+
+  private _handleMouseEnter = () => {
+    if (this.trigger !== 'hover') return;
+    if (this.disabled) return;
+    this.open = true;
+  };
+
+  private _handleMouseLeave = () => {
+    if (this.trigger !== 'hover') return;
+    this.open = false;
+  };
+
+  private _handleFocusin = () => {
+    if (this.trigger !== 'hover') return;
+    if (this.disabled) return;
+    this.open = true;
+  };
+
+  private _handleFocusout = () => {
+    if (this.trigger !== 'hover') return;
+    this.open = false;
+  };
+
+  private _handleClick = () => {
+    if (this.trigger !== 'click') return;
+    if (this.disabled) return;
+    this.open = !this.open;
+  };
+
+  private _updatePosition() {
+    const panel = this.shadowRoot?.querySelector<HTMLElement>('.tooltip-panel');
+    if (!panel) return;
+
+    const host = this.getBoundingClientRect();
+    const panelRect = panel.getBoundingClientRect();
+    const gap = 6; // Match --ae-tooltip-gap: 6px
+    const pw = panelRect.width;
+    const ph = panelRect.height;
+
+    let top: number;
+    let left: number;
+
+    switch (this.placement) {
+      case 'top-start':
+        top = host.top - ph - gap;
+        left = host.left;
+        break;
+      case 'top-end':
+        top = host.top - ph - gap;
+        left = host.right - pw;
+        break;
+      case 'bottom':
+        top = host.bottom + gap;
+        left = host.left + host.width / 2 - pw / 2;
+        break;
+      case 'bottom-start':
+        top = host.bottom + gap;
+        left = host.left;
+        break;
+      case 'bottom-end':
+        top = host.bottom + gap;
+        left = host.right - pw;
+        break;
+      case 'left':
+        top = host.top + host.height / 2 - ph / 2;
+        left = host.left - pw - gap;
+        break;
+      case 'right':
+        top = host.top + host.height / 2 - ph / 2;
+        left = host.right + gap;
+        break;
+      default: // 'top'
+        top = host.top - ph - gap;
+        left = host.left + host.width / 2 - pw / 2;
+    }
+
+    panel.style.top = `${top}px`;
+    panel.style.left = `${left}px`;
+  }
+
+  protected onUpdated(changedProps: Map<string, unknown>) {
+    if (changedProps.has('open') && this.open) {
+      this._updatePosition();
+    }
+  }
+
+  protected render() {
+    return html(({ div, span, slot }) => {
+      slot();
+      div(
+        {
+          className: `tooltip-panel placement-${this.placement ?? 'top'}`,
+          role: 'tooltip',
+          'aria-hidden': String(!this.open),
+        },
+        () => {
+          slot({ name: 'tooltip' }, () => {
+            span({ textContent: this.content ?? '' });
+          });
+        },
+      );
+    });
+  }
+}
+
+Tooltip.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-tooltip': Tooltip;
+  }
+}
+
+export type TooltipProps = InferProps<typeof Tooltip>;
+export default Tooltip;

package/src/tree/defines.ts

@@ -0,0 +1,26 @@
+/** Minimal interface used by tree-item to read config from its parent ae-tree. */
+export interface ParentTreeLike extends Element {
+  checkable?: boolean;
+  multiple?: boolean;
+  showLine?: boolean;
+  defaultExpandAll?: boolean;
+  icon?: string;
+}
+
+export interface TreeSelectDetail {
+  key: string;
+  selected: boolean;
+  selectedKeys: string[];
+}
+
+export interface TreeExpandDetail {
+  key: string;
+  expanded: boolean;
+  expandedKeys: string[];
+}
+
+export interface TreeCheckDetail {
+  key: string;
+  checked: boolean;
+  checkedKeys: string[];
+}

package/src/tree/index.ts

@@ -0,0 +1,5 @@
+export { default as Tree } from './tree';
+export { default as TreeItem } from './tree-item';
+export type { TreeProps } from './tree';
+export type { TreeItemProps } from './tree-item';
+export type { TreeSelectDetail, TreeExpandDetail, TreeCheckDetail } from './defines';

package/src/tree/tree-item.ts

@@ -0,0 +1,258 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import { html, prop } from 'aeico';
+import style from '../styles/components/tree-item.css?inline';
+import variables from '../styles/variables.css?inline';
+import type { ParentTreeLike } from './defines';
+import { SVG_NS } from '../utils';
+import '../icon';
+
+let _autoKeyCounter = 0;
+
+/**
+ * Tree item — used as a direct child of `<ae-tree>` or nested inside another
+ * `<ae-tree-item>` to create a multi-level tree.
+ *
+ * - **Parent item**: nest `<ae-tree-item>` children inside; an expand toggle is shown.
+ * - **Leaf item**: no `<ae-tree-item>` children; no expand toggle is shown.
+ *
+ * @prop {string}  key          - Unique identifier for this item.
+ * @prop {string}  icon         - Icon name (uses `<ae-icon>`). Optional.
+ * @prop {boolean} disabled     - Disables interaction.
+ * @prop {boolean} expanded     - Whether children are visible.
+ * @prop {boolean} selected     - Whether this item is visually selected.
+ * @prop {boolean} checked      - Checkbox state (checkable mode).
+ * @prop {boolean} indeterminate - Checkbox partial state (checkable mode, JS-only).
+ *
+ * @slot default - Child `<ae-tree-item>` elements.
+ * @slot label   - Custom label content (falls back to the `label` attribute text).
+ */
+class TreeItem extends AeicoComponent {
+  static tagName = 'tree-item';
+
+  protected static styles = [variables, style];
+
+  @prop({ type: String })
+  accessor key: string | undefined;
+
+  @prop({ type: String })
+  accessor icon: string | undefined;
+
+  /** Stable auto-generated key used when `key` prop is not set. */
+  private readonly _autoKey = `ae-tree-item-${_autoKeyCounter++}`;
+
+  private get _effectiveKey(): string {
+    return this.key ?? this._autoKey;
+  }
+
+  @prop({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor expanded: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor selected: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor checked: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor indeterminate: boolean = false;
+
+  private _checkboxEl: HTMLInputElement | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Auto-assign slot so users don't need to write slot="sub" manually
+    if (
+      this.parentElement?.tagName.toLowerCase() === 'ae-tree-item' &&
+      !this.hasAttribute('slot')
+    ) {
+      this.setAttribute('slot', 'sub');
+    }
+
+    let depth = 0;
+    let el: Element | null = this.parentElement;
+    while (el) {
+      const tag = el.tagName.toLowerCase();
+      if (tag === 'ae-tree-item') {
+        depth++;
+      } else if (tag === 'ae-tree') {
+        break;
+      }
+      el = el.parentElement;
+    }
+    this.style.setProperty('--depth', String(depth));
+
+    if (this._parentTree?.showLine) {
+      this.setAttribute('showline', '');
+    }
+  }
+
+  protected onMounted(): void {
+    if (this._parentTree?.defaultExpandAll && this._hasChildren) {
+      this.expanded = true;
+    }
+  }
+
+  private get _parentTree(): ParentTreeLike | null {
+    return this.closest<ParentTreeLike>('ae-tree');
+  }
+
+  private get _isCheckable(): boolean {
+    return this._parentTree?.checkable ?? false;
+  }
+
+  private get _hasChildren(): boolean {
+    return !!this.querySelector(':scope > ae-tree-item[slot="sub"]');
+  }
+
+  private _handleExpandClick = (e: Event): void => {
+    e.stopPropagation();
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent('_tree-item-toggle-expand', {
+        bubbles: true,
+        composed: true,
+        detail: { key: this._effectiveKey },
+      }),
+    );
+  };
+
+  private _handleLabelClick = (): void => {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent('_tree-item-select', {
+        bubbles: true,
+        composed: true,
+        detail: { key: this._effectiveKey },
+      }),
+    );
+  };
+
+  private _handleCheckChange = (e: Event): void => {
+    if (this.disabled) return;
+    const input = e.target as HTMLInputElement;
+    this.dispatchEvent(
+      new CustomEvent('_tree-item-check', {
+        bubbles: true,
+        composed: true,
+        detail: { key: this._effectiveKey, checked: input.checked },
+      }),
+    );
+  };
+
+  private _handleKeydown = (e: KeyboardEvent): void => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      if ((e.target as HTMLElement).classList.contains('tree-item-label')) {
+        this._handleLabelClick();
+      }
+    }
+    if (e.key === 'ArrowRight' && this._hasChildren && !this.expanded) {
+      this._handleExpandClick(e);
+    }
+    if (e.key === 'ArrowLeft' && this.expanded) {
+      this._handleExpandClick(e);
+    }
+  };
+
+  protected onUpdated(): void {
+    // indeterminate/checked cannot be set correctly via HTML attribute — must set via JS property
+    if (this._checkboxEl) {
+      this._checkboxEl.checked = this.checked;
+      this._checkboxEl.indeterminate = this.indeterminate;
+    }
+  }
+
+  protected render() {
+    const hasChildren = this._hasChildren;
+    const isCheckable = this._isCheckable;
+    const expandIcon = this.icon ?? this._parentTree?.icon;
+
+    return html(({ div, button, span, input, slot, svg, path, aeIcon }) => {
+      div(
+        {
+          className: 'tree-item-content',
+          role: 'treeitem',
+          'aria-expanded': hasChildren ? String(this.expanded) : undefined,
+          'aria-selected': String(this.selected),
+          'aria-disabled': this.disabled ? 'true' : undefined,
+        },
+        () => {
+          if (hasChildren) {
+            button(
+              {
+                type: 'button',
+                className: 'expand-btn',
+                tabIndex: -1,
+                'aria-hidden': 'true',
+                '@click': this._handleExpandClick,
+              },
+              () => {
+                if (expandIcon) {
+                  aeIcon({ className: 'expand-icon', name: expandIcon });
+                } else {
+                  svg(
+                    {
+                      className: 'expand-icon',
+                      viewBox: '0 0 10 10',
+                      'aria-hidden': 'true',
+                      xmlns: SVG_NS,
+                    },
+                    () => {
+                      path({ d: 'M2 1l6 4-6 4V1z' });
+                    },
+                  );
+                }
+              },
+            );
+          } else {
+            span({ className: 'expand-placeholder', 'aria-hidden': 'true' });
+          }
+
+          if (isCheckable) {
+            this._checkboxEl = input({
+              type: 'checkbox',
+              className: 'tree-item-checkbox',
+              checked: this.checked,
+              disabled: this.disabled,
+              tabIndex: -1,
+              '@change': this._handleCheckChange,
+            });
+          }
+
+          button(
+            {
+              type: 'button',
+              className: 'tree-item-label',
+              disabled: this.disabled,
+              '@click': this._handleLabelClick,
+              '@keydown': this._handleKeydown,
+            },
+            () => {
+              slot();
+            },
+          );
+        },
+      );
+
+      div({ className: 'tree-item-children', role: 'group' }, () => {
+        slot({ name: 'sub' });
+      });
+    });
+  }
+}
+
+TreeItem.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-tree-item': TreeItem;
+  }
+}
+
+export default TreeItem;
+export type TreeItemProps = InferProps<typeof TreeItem>;