aeico-components 0.1.5 → 0.1.7

package/src/switch/switch.ts

@@ -1,9 +1,13 @@
 import AeicoField, { type FieldAction } from '../aeico-field';
-import type { InferProps, Props } from 'aeico';
-import { html } from 'aeico';
+import type { InferProps } from 'aeico';
+import { html, prop } from 'aeico';
+import type { SwitchIconPlacement } from './defines';
+import '../icon/icon';
 import styleVariables from '../styles/variables.css?inline';
 import sizeCSS from '../styles/size.css?inline';
 import colorCSS from '../styles/color.css?inline';
+import fieldLabelCSS from '../styles/components/field-label.css?inline';
+import actionButtonCSS from '../styles/components/action-button.css?inline';
 import styles from '../styles/components/switch.css?inline';
 
 class Switch extends AeicoField<boolean> {
@@ -11,15 +15,29 @@ class Switch extends AeicoField<boolean> {
 
   static tagName = 'switch';
 
-  static props: Props = {
-    checked: { type: Boolean },
-    defaultChecked: { type: Boolean },
-  };
+  @prop({ type: Boolean })
+  accessor checked: boolean | undefined;
 
-  declare checked?: boolean;
-  declare defaultChecked?: boolean;
+  @prop({ type: Boolean })
+  accessor defaultChecked: boolean | undefined;
 
-  protected static styles = [styleVariables, sizeCSS, colorCSS, styles];
+  @prop({ type: String })
+  accessor icon: string | undefined;
+
+  @prop({ type: String })
+  accessor iconChecked: string | undefined;
+
+  @prop({ type: String })
+  accessor iconPlacement: SwitchIconPlacement | undefined;
+
+  protected static styles = [
+    styleVariables,
+    sizeCSS,
+    colorCSS,
+    fieldLabelCSS,
+    actionButtonCSS,
+    styles,
+  ];
 
   protected getValue(): boolean {
     return this.fieldElement?.checked ?? false;
@@ -58,20 +76,51 @@ class Switch extends AeicoField<boolean> {
   }
 
   render() {
-    return html(({ div, input, span }) => {
-      div({ className: 'switch-container' }, () => {
+    return html(({ div, input, span, aeIcon }) => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: 'switch-container field-body' }, () => {
         div({ className: 'switch-wrapper' }, () => {
           this.fieldElement = input({
+            id,
             type: 'checkbox',
             className: 'field-input',
             checked: Boolean(this.checked),
             disabled: Boolean(this.disabled),
+            required: Boolean(this.required),
             '@change': this.boundOnChange,
           });
-          span({ className: 'toggle-slider' });
+          const hasIcon = this.icon || this.iconChecked;
+          const placement = this.iconPlacement ?? 'knob';
+          span({ className: 'toggle-slider' }, () => {
+            if (!hasIcon) return;
+            if (placement === 'track') {
+              span({ className: 'track-icon track-icon-left' }, () => {
+                aeIcon({ name: this.iconChecked ?? this.icon! });
+              });
+              span({ className: 'track-icon track-icon-right' }, () => {
+                aeIcon({ name: this.icon ?? this.iconChecked! });
+              });
+            } else {
+              if (this.icon && this.iconChecked) {
+                span({ className: 'toggle-knob-icon icon-unchecked' }, () => {
+                  aeIcon({ name: this.icon! });
+                });
+                span({ className: 'toggle-knob-icon icon-checked' }, () => {
+                  aeIcon({ name: this.iconChecked! });
+                });
+              } else {
+                span({ className: 'toggle-knob-icon' }, () => {
+                  aeIcon({ name: (this.icon ?? this.iconChecked)! });
+                });
+              }
+            }
+          });
         });
         this.renderActionButtons();
       });
+      this.renderHelperText();
+      this.renderError();
     });
   }
 }

package/src/tabs/defines.ts

@@ -1 +1,2 @@
 export type TabActiveIndex = number;
+export type TabVariant = 'subtle' | 'faint' | 'filled' | 'outlined' | 'text';

package/src/tabs/tabs.ts

@@ -4,13 +4,16 @@ import tabsStyle from '../styles/components/tabs.css?inline';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import type Tab from './tab';
+import type { TabVariant } from './defines';
 
 class Tabs extends AeicoComponent {
   static props: Props = {
     activeIndex: { type: Number },
+    variant: { type: String },
   };
 
   declare activeIndex?: number;
+  declare variant?: TabVariant;
 
   protected static styles = [styleVariables, tabsStyle];
 
@@ -77,9 +80,18 @@ class Tabs extends AeicoComponent {
   }
 
   protected onUpdated() {
+    this._syncVariant();
     this._syncActive();
   }
 
+  private _syncVariant() {
+    const variant = this.variant ?? 'text';
+    this.setAttribute('variant', variant);
+    for (const tab of this._tabs) {
+      tab.setAttribute('variant', variant);
+    }
+  }
+
   private _handleTabClick = (e: Event) => {
     const pairs = this._getPairs();
     const target = e.target as Element;

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