aeico-components 0.1.1

package/src/radio-group/defines.ts

@@ -0,0 +1,5 @@
+export type RadioGroupMode = 'default' | 'button' | 'button-group' | 'segmented';
+
+export type RadioGroupOption = string | number | { label: string; value: string | number };
+
+export type RadioGroupOptions = RadioGroupOption[];

package/src/radio-group/index.ts

@@ -0,0 +1,5 @@
+export { default, default as RadioGroup } from './radio-group';
+export type { RadioGroupProps } from './radio-group';
+export type { RadioGroupMode, RadioGroupOption, RadioGroupOptions } from './defines';
+export { default as Radio } from './radio';
+export type { RadioProps } from './radio';

package/src/radio-group/radio-group.ts

@@ -0,0 +1,227 @@
+import AeicoField from '../aeico-field';
+import type { InferProps, Props } from 'aeico';
+import { html, tags } from 'aeico';
+import type { ButtonColor, ButtonVariant, ButtonSize } from '../button';
+import { t } from 'aeico-localize';
+import type { RadioGroupMode, RadioGroupOption, RadioGroupOptions } from './defines';
+import Radio from './radio';
+import style from '../styles/components/radio-group.css?inline';
+import variables from '../styles/variables.css?inline';
+import sizeCSS from '../styles/size.css?inline';
+import colorCSS from '../styles/color.css?inline';
+
+class RadioGroup extends AeicoField {
+  protected fieldElement: HTMLInputElement | null = null;
+
+  private _slotEl: HTMLSlotElement | null = null;
+  private _slotOptions: Radio[] = [];
+
+  private static _instanceCount = 0;
+  private readonly _groupName: string;
+
+  static tagName = 'radio-group';
+
+  static props: Props = {
+    options: { type: Array },
+    mode: { type: String },
+    color: { type: String },
+    variant: { type: String },
+    size: { type: String },
+    allowEmpty: { type: Boolean },
+  };
+
+  declare options?: RadioGroupOptions;
+  declare mode?: RadioGroupMode;
+  declare color?: ButtonColor;
+  declare variant?: ButtonVariant;
+  declare size?: ButtonSize;
+  declare allowEmpty?: boolean;
+
+  protected static styles = [variables, sizeCSS, colorCSS, style];
+
+  constructor() {
+    super();
+    this._groupName = `rg-${++RadioGroup._instanceCount}`;
+  }
+
+  private _optLabel(opt: RadioGroupOption): string {
+    if (opt !== null && typeof opt === 'object') {
+      return t(String(opt.label), String(opt.label));
+    }
+    return String(opt);
+  }
+
+  private _optValue(opt: RadioGroupOption): string {
+    if (opt !== null && typeof opt === 'object') return String(opt.value);
+    return String(opt);
+  }
+
+  private _allOptions(): Array<{ label: string; value: string; disabled?: boolean }> {
+    const from_props = (Array.isArray(this.options) ? this.options : []).map((o) => ({
+      label: this._optLabel(o),
+      value: this._optValue(o),
+    }));
+
+    const from_slot = this._slotOptions.map((el) => ({
+      label: el.textContent?.trim() || el.value,
+      value: el.value,
+      disabled: el.disabled,
+    }));
+
+    return [...from_props, ...from_slot];
+  }
+
+  private _onSlotChange(): void {
+    if (!this._slotEl) return;
+
+    this._slotOptions = (this._slotEl.assignedElements({ flatten: true }) as HTMLElement[]).filter(
+      (el) => el.tagName.toLowerCase() === 'ae-radio',
+    ) as Radio[];
+    this.update();
+  }
+
+  // Single handler for radio inputs — handles both select and deselect.
+  // Only uses `click` (not `change`) because `change` fires before `click`;
+  // if we set value in `change`, the `click` handler would see the updated
+  // value and immediately deselect.
+  private _boundOnRadioClick = (e: Event) => {
+    const input = e.target as HTMLInputElement;
+    const current = this.value ?? '';
+    if (input.value === current) {
+      if (this.allowEmpty) {
+        input.checked = false;
+        this.setValue('', { silent: false, action: 'change' });
+      }
+      // !allowEmpty: do nothing
+    } else {
+      this.setValue(input.value, { silent: false, action: 'change' });
+    }
+  };
+
+  private _boundOnButtonClick = (e: Event) => {
+    const btn = e.currentTarget as HTMLElement;
+    const val = btn.dataset.value ?? '';
+    const current = this.value ?? '';
+    // Toggle off if clicking already-selected option
+    if (val === current) {
+      if (this.allowEmpty) {
+        this.setValue('', { silent: false, action: 'change' });
+      }
+      // !allowEmpty: already selected, do nothing
+    } else {
+      this.setValue(val, { silent: false, action: 'change' });
+    }
+  };
+
+  protected getValue(): string {
+    return this.value ?? '';
+  }
+
+  protected writeValue(_value: any): void {
+    // All visual state is driven by builder diff on next render;
+    // for native radio inputs we need to sync checked immediately.
+    // The render() reads this.value, so update handles the rest.
+  }
+
+  protected onReset(): void {
+    this.setValue(this.defaultValue ?? '', { silent: false, action: 'reset' });
+  }
+
+  protected onClear(): void {
+    this.setValue('', { silent: false, action: 'clear' });
+  }
+
+  render() {
+    const mode = (this.mode as RadioGroupMode) || 'default';
+    const opts = this._allOptions();
+    const current = this.value ?? '';
+
+    return html(({ div, slot }) => {
+      div({ className: 'rg-container' }, () => {
+        if (mode === 'default') {
+          this._renderRadio(opts, current);
+        } else {
+          this._renderButtons(opts, current, mode);
+        }
+      });
+
+      if (this.allowEmpty) this.renderClearButton();
+      this.renderResetButton();
+
+      // Hidden slot — captures <option> light DOM children
+      this._slotEl = slot({
+        style: { display: 'none' },
+        '@slotchange': () => this._onSlotChange(),
+      });
+    });
+  }
+
+  private _renderRadio(
+    opts: Array<{ label: string; value: string; disabled?: boolean }>,
+    current: string,
+  ): void {
+    const { label, input, span } = tags;
+    for (const opt of opts) {
+      const isChecked = opt.value === current;
+
+      label({ key: `opt-${opt.value}`, className: 'rg-radio-option' }, () => {
+        const el = input({
+          type: 'radio',
+          className: 'rg-radio-input',
+          name: this._groupName,
+          value: opt.value,
+          disabled: Boolean(this.disabled) || Boolean(opt.disabled),
+          '@click': this._boundOnRadioClick,
+        });
+        // Sync DOM property directly — setAttribute('checked') doesn't work
+        // after user interaction; only the .checked property controls state.
+        el.checked = isChecked;
+        // Keep fieldElement pointing to first radio for base-class compat
+        if (!this.fieldElement) this.fieldElement = el;
+        span({ className: 'rg-radio-label', textContent: opt.label });
+      });
+    }
+  }
+
+  private _renderButtons(
+    opts: Array<{ label: string; value: string; disabled?: boolean }>,
+    current: string,
+    mode: RadioGroupMode,
+  ): void {
+    const { button } = tags;
+    const count = opts.length;
+    for (let i = 0; i < count; i++) {
+      const opt = opts[i];
+      const isSelected = opt.value === current;
+
+      // Position class for button-group border-radius (CSS handles all styling)
+      let posClass = '';
+      if (mode === 'button-group') {
+        if (count === 1) posClass = ' only';
+        else if (i === 0) posClass = ' first';
+        else if (i === count - 1) posClass = ' last';
+        else posClass = ' inner';
+      }
+
+      button({
+        key: `opt-${opt.value}`,
+        className: `rg-btn${isSelected ? ' selected' : ''}${posClass}`,
+        textContent: opt.label,
+        disabled: Boolean(this.disabled) || Boolean(opt.disabled),
+        'data-value': opt.value,
+        '@click': this._boundOnButtonClick,
+      });
+    }
+  }
+}
+
+RadioGroup.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-radio-group': RadioGroup;
+  }
+}
+
+export default RadioGroup;
+export type RadioGroupProps = InferProps<typeof RadioGroup>;

package/src/radio-group/radio.ts

@@ -0,0 +1,58 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps, Props } from 'aeico';
+
+/**
+ * AeRadio — structured option element for ae-radio-group.
+ *
+ * Replaces the native `<option>` approach with a custom element that is
+ * fully extensible.  Current surface:
+ *   - `value`    — option value submitted / matched against radio-group value
+ *   - `disabled` — disables this individual option (independent of the group)
+ *   - Light DOM  — label content; can be plain text or rich HTML (icons, etc.)
+ *
+ * This element has **no shadow DOM** — it is a pure data / content carrier.
+ * ae-radio-group reads its properties and light-DOM content, then renders
+ * the appropriate UI (radio input, button, segmented pill, …).
+ *
+ * @example Plain text options
+ * ```html
+ * <ae-radio-group mode="button" color="primary" value="a">
+ *   <ae-radio value="a">Option A</ae-radio>
+ *   <ae-radio value="b">Option B</ae-radio>
+ *   <ae-radio value="c" disabled>Option C</ae-radio>
+ * </ae-radio-group>
+ * ```
+ *
+ * @example Rich content options (icons)
+ * ```html
+ * <ae-radio-group mode="button" color="primary" value="list">
+ *   <ae-radio value="list"><ae-icon name="list"></ae-icon> List</ae-radio>
+ *   <ae-radio value="grid"><ae-icon name="grid"></ae-icon> Grid</ae-radio>
+ * </ae-radio-group>
+ * ```
+ */
+class Radio extends AeicoComponent {
+  static tagName = 'radio';
+
+  /** No shadow DOM — this element is a transparent data/content carrier. */
+  static override useShadowDOM = false;
+
+  static override props: Props = {
+    value: { type: String },
+    disabled: { type: Boolean },
+  };
+
+  declare value: string;
+  declare disabled?: boolean;
+}
+
+Radio.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-radio': Radio;
+  }
+}
+
+export default Radio;
+export type RadioProps = InferProps<typeof Radio>;

package/src/select/defines.ts

@@ -0,0 +1,12 @@
+export type SelectOptionValue = string | number;
+
+export type SelectOption = {
+  label: string;
+  value: SelectOptionValue;
+};
+
+export type SelectOptions = SelectOptionValue[] | SelectOption[];
+
+export type SelectPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export type SelectMultiValue = SelectOptionValue[];

package/src/select/index.ts

@@ -0,0 +1,5 @@
+export { default, default as Select } from './select';
+export type { SelectProps } from './select';
+export { default as SelectOption } from './select-option';
+export type { SelectOptionProps } from './select-option';
+export type { SelectOptionValue, SelectOptions, SelectPosition } from './defines';

package/src/select/select-option.ts

@@ -0,0 +1,59 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import { html } from 'aeico';
+import style from '../styles/components/select-option.css?inline';
+import variables from '../styles/variables.css?inline';
+import { prop } from 'aeico';
+
+class SelectOption extends AeicoComponent {
+  static tagName = 'select-option';
+
+  @prop({ type: String })
+  accessor value: string | undefined;
+
+  @prop({ type: String })
+  accessor label: string | undefined;
+
+  @prop({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor selected: boolean | undefined = false;
+
+  protected static styles = [variables, style];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen('click', this._handleClick);
+  }
+
+  private _handleClick = (e: Event): void => {
+    if (this.disabled) {
+      e.stopPropagation();
+
+      return;
+    }
+
+    const displayLabel = this.label || this.textContent?.trim() || '';
+    this.emit('selectoption', { detail: { value: this.value ?? '', label: displayLabel } });
+  };
+
+  render() {
+    return html(({ div, slot }) => {
+      div({ className: 'option-item' }, () => {
+        slot();
+      });
+    });
+  }
+}
+
+SelectOption.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-select-option': SelectOption;
+  }
+}
+
+export default SelectOption;
+export type SelectOptionProps = InferProps<typeof SelectOption>;