agnosticui-core 2.0.0-alpha.2

package/src/components/Input/react/ReactInput.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { AgInput, type InputProps } from '../core/Input';
+
+/**
+ * React-specific props for Input
+ *
+ * Following AgnosticUI v2 event conventions:
+ * - All events are native (click, input, change, focus, blur)
+ * - Native events work automatically in React, no event mapping needed
+ */
+export interface ReactInputProps extends InputProps {
+  children?: React.ReactNode;
+  className?: string;
+  id?: string;
+  // Native events work automatically via callback props
+  onClick?: (event: MouseEvent) => void;
+  onInput?: (event: InputEvent) => void;
+  onChange?: (event: Event) => void;
+  onFocus?: (event: FocusEvent) => void;
+  onBlur?: (event: FocusEvent) => void;
+}
+
+// Create Input component with @lit/react
+// Note: Native events (click, input, change, focus, blur) work automatically
+// No need to map them in the events object
+export const ReactInput = createComponent({
+  tagName: 'ag-input',
+  elementClass: AgInput,
+  react: React,
+  events: {
+    // Native events don't need to be mapped - they work automatically
+  },
+});

package/src/components/Input/react/index.ts

@@ -0,0 +1,2 @@
+export { ReactInput } from './ReactInput';
+export type { ReactInputProps } from './ReactInput';

package/src/components/Input/vue/VueInput.vue

@@ -0,0 +1,122 @@
+<template>
+  <ag-input
+    ref="inputRef"
+    .value="value"
+    .labelHidden="labelHidden"
+    .noLabel="noLabel"
+    .capsule="capsule"
+    .rounded="rounded"
+    .underlined="underlined"
+    .underlinedWithBackground="underlinedWithBackground"
+    .inline="inline"
+    .required="required"
+    .disabled="disabled"
+    .readonly="readonly"
+    .invalid="invalid"
+    :type="type"
+    :placeholder="placeholder"
+    :label="label"
+    :ariaLabel="ariaLabel"
+    :helpText="helpText"
+    :errorMessage="errorMessage"
+    :size="size"
+    :rows="rows"
+    :cols="cols"
+    @click="handleClick"
+    @input="handleInput"
+    @change="handleChange"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    v-bind="$attrs"
+  >
+    <template v-if="$slots['addon-left']">
+      <span slot="addon-left">
+        <slot name="addon-left"></slot>
+      </span>
+    </template>
+    <template v-if="$slots['addon-right']">
+      <span slot="addon-right">
+        <slot name="addon-right"></slot>
+      </span>
+    </template>
+  </ag-input>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { InputProps } from "../core/Input";
+import "../core/Input"; // Registers the ag-input web component
+
+/**
+ * Vue Input Props
+ * Following AgnosticUI v2 event conventions:
+ * - Omit callback props (Vue uses emits)
+ * - Support v-model:value via update:value emit
+ */
+export interface VueInputProps
+  extends Omit<
+    InputProps,
+    "onClick" | "onInput" | "onChange" | "onFocus" | "onBlur"
+  > {}
+// Define props with defaults
+const props = withDefaults(defineProps<VueInputProps>(), {
+  value: "",
+  label: "",
+  labelHidden: false,
+  noLabel: false,
+  ariaLabel: "",
+  type: "text",
+  placeholder: "",
+  rows: 4,
+  cols: 50,
+  size: "default",
+  capsule: false,
+  rounded: false,
+  underlined: false,
+  underlinedWithBackground: false,
+  inline: false,
+  required: false,
+  disabled: false,
+  readonly: false,
+  invalid: false,
+  errorMessage: "",
+  helpText: "",
+});
+
+// Define emits - native events emit full event object
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+  input: [event: InputEvent];
+  change: [event: Event];
+  focus: [event: FocusEvent];
+  blur: [event: FocusEvent];
+  "update:value": [value: string];
+}>();
+
+// Template ref
+const inputRef = ref<HTMLElement>();
+
+// Event handlers - native events emit full event object
+const handleClick = (event: MouseEvent) => {
+  emit("click", event);
+};
+
+const handleInput = (event: Event) => {
+  emit("input", event as InputEvent);
+  // Update v-model
+  const target = event.target as HTMLInputElement;
+  emit("update:value", target.value);
+};
+
+const handleChange = (event: Event) => {
+  emit("change", event);
+};
+
+const handleFocus = (event: FocusEvent) => {
+  emit("focus", event);
+};
+
+const handleBlur = (event: FocusEvent) => {
+  emit("blur", event);
+};
+</script>

package/src/components/Input/vue/index.ts

@@ -0,0 +1,31 @@
+export { default } from './VueInput.vue';
+export { default as VueInput } from './VueInput.vue';
+
+// Define types separately since Vue component types are handled differently
+export interface VueInputProps {
+  modelValue?: string;
+  label?: string;
+  labelHidden?: boolean;
+  noLabel?: boolean;
+  ariaLabel?: string;
+  type?: string;
+  value?: string;
+  placeholder?: string;
+  name?: string;
+  rows?: number;
+  cols?: number;
+  size?: 'small' | 'default' | 'large';
+  isCapsule?: boolean;
+  isRounded?: boolean;
+  isUnderlined?: boolean;
+  isUnderlinedWithBackground?: boolean;
+  isInline?: boolean;
+  hasLeftAddon?: boolean;
+  hasRightAddon?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  invalid?: boolean;
+  errorMessage?: string;
+  helpText?: string;
+}

package/src/components/IntlFormatter/core/IntlFormatter.ts

@@ -0,0 +1,13 @@
+import { IntlFormatter } from './_IntlFormatter.js';
+
+if (!customElements.get('ag-intl-formatter')) {
+  customElements.define('ag-intl-formatter', IntlFormatter);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-intl-formatter': IntlFormatter;
+  }
+}
+
+export * from './_IntlFormatter.js';

package/src/components/IntlFormatter/core/_IntlFormatter.ts

@@ -0,0 +1,389 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export interface IntlFormatterProps {
+  type?: 'date' | 'number' | 'percent' | 'currency';
+  value?: number | string | Date;
+  lang?: string;
+  
+  // Date-specific props
+  date?: Date | string;
+  weekday?: 'narrow' | 'short' | 'long';
+  era?: 'narrow' | 'short' | 'long';
+  year?: 'numeric' | '2-digit';
+  month?: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
+  day?: 'numeric' | '2-digit';
+  hour?: 'numeric' | '2-digit';
+  minute?: 'numeric' | '2-digit';
+  second?: 'numeric' | '2-digit';
+  timeZoneName?: 'short' | 'long';
+  timeZone?: string;
+  hourFormat?: 'auto' | '12' | '24';
+  dateStyle?: 'full' | 'long' | 'medium' | 'short';
+  timeStyle?: 'full' | 'long' | 'medium' | 'short';
+  
+  // Number-specific props
+  noGrouping?: boolean;
+  currency?: string;
+  currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name';
+  minimumIntegerDigits?: number;
+  minimumFractionDigits?: number;
+  maximumFractionDigits?: number;
+  minimumSignificantDigits?: number;
+  maximumSignificantDigits?: number;
+}
+
+/**
+ * @element ag-intl-formatter
+ * @summary Formats dates, numbers, currency, and percentages using the browser's Intl API
+ * 
+ * @prop {string} type - The type of formatting: 'date', 'number', 'percent', or 'currency'
+ * @prop {number|string|Date} value - The value to format (for numbers/currency/percent) or date
+ * @prop {string} lang - The locale to use for formatting (e.g., 'en-US', 'fr-FR'). Defaults to browser locale
+ * 
+ * @fires format-error - Dispatched when formatting fails with details about the error
+ * 
+ * @csspart date-time - The time element wrapper for date formatting
+ * @csspart number - The span element for number formatting
+ * @csspart percent - The span element for percent formatting
+ * @csspart currency - The span element for currency formatting
+ * @csspart error - The span element shown when validation fails
+ * 
+ * @example
+ * ```html
+ * <!-- Date formatting -->
+ * <ag-intl-formatter type="date" date="2024-01-01"></ag-intl-formatter>
+ * 
+ * <!-- Date with style shortcuts -->
+ * <ag-intl-formatter type="date" date="2024-01-01" date-style="long"></ag-intl-formatter>
+ * 
+ * <!-- Number formatting -->
+ * <ag-intl-formatter type="number" value="1234.56"></ag-intl-formatter>
+ * 
+ * <!-- Currency formatting -->
+ * <ag-intl-formatter type="currency" value="1234.56" currency="USD"></ag-intl-formatter>
+ * 
+ * <!-- Percent formatting -->
+ * <ag-intl-formatter type="percent" value="0.75"></ag-intl-formatter>
+ * ```
+ */
+export class IntlFormatter extends LitElement implements IntlFormatterProps {
+  @property({ type: String, reflect: true })
+  declare type: 'date' | 'number' | 'percent' | 'currency';
+
+  @property({ type: String, reflect: true })
+  declare value: number | string | Date;
+
+  @property({ type: String, reflect: true })
+  declare lang: string;
+
+  // Date-specific properties
+  @property({ type: String, reflect: true })
+  declare date: Date | string;
+
+  @property({ type: String, reflect: true })
+  declare weekday: 'narrow' | 'short' | 'long';
+
+  @property({ type: String, reflect: true })
+  declare era: 'narrow' | 'short' | 'long';
+
+  @property({ type: String, reflect: true })
+  declare year: 'numeric' | '2-digit';
+
+  @property({ type: String, reflect: true })
+  declare month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
+
+  @property({ type: String, reflect: true })
+  declare day: 'numeric' | '2-digit';
+
+  @property({ type: String, reflect: true })
+  declare hour: 'numeric' | '2-digit';
+
+  @property({ type: String, reflect: true })
+  declare minute: 'numeric' | '2-digit';
+
+  @property({ type: String, reflect: true })
+  declare second: 'numeric' | '2-digit';
+
+  @property({ type: String, reflect: true, attribute: 'time-zone-name' })
+  declare timeZoneName: 'short' | 'long';
+
+  @property({ type: String, reflect: true, attribute: 'time-zone' })
+  declare timeZone: string;
+
+  @property({ type: String, reflect: true, attribute: 'hour-format' })
+  declare hourFormat: 'auto' | '12' | '24';
+
+  @property({ type: String, reflect: true, attribute: 'date-style' })
+  declare dateStyle: 'full' | 'long' | 'medium' | 'short';
+
+  @property({ type: String, reflect: true, attribute: 'time-style' })
+  declare timeStyle: 'full' | 'long' | 'medium' | 'short';
+
+  // Number-specific properties
+  @property({ type: Boolean, reflect: true, attribute: 'no-grouping' })
+  declare noGrouping: boolean;
+
+  @property({ type: String, reflect: true })
+  declare currency: string;
+
+  @property({ type: String, reflect: true, attribute: 'currency-display' })
+  declare currencyDisplay: 'symbol' | 'narrowSymbol' | 'code' | 'name';
+
+  @property({ type: Number, reflect: true, attribute: 'minimum-integer-digits' })
+  declare minimumIntegerDigits: number;
+
+  @property({ type: Number, reflect: true, attribute: 'minimum-fraction-digits' })
+  declare minimumFractionDigits: number;
+
+  @property({ type: Number, reflect: true, attribute: 'maximum-fraction-digits' })
+  declare maximumFractionDigits: number;
+
+  @property({ type: Number, reflect: true, attribute: 'minimum-significant-digits' })
+  declare minimumSignificantDigits: number;
+
+  @property({ type: Number, reflect: true, attribute: 'maximum-significant-digits' })
+  declare maximumSignificantDigits: number;
+
+  // Formatter cache for performance
+  private _formatterCache = new Map<string, Intl.DateTimeFormat | Intl.NumberFormat>();
+
+  constructor() {
+    super();
+    this.type = 'date';
+    this.hourFormat = 'auto';
+    this.noGrouping = false;
+    this.currency = 'USD';
+    this.currencyDisplay = 'symbol';
+  }
+
+  /**
+   * Get the locale to use for formatting
+   */
+  private _getLocale(): string | string[] {
+    return this.lang || navigator.language;
+  }
+
+  /**
+   * Generate a cache key based on formatter type and options
+   */
+  private _getCacheKey(): string {
+    const parts = [this.type, this._getLocale()];
+    
+    if (this.type === 'date') {
+      parts.push(
+        this.dateStyle || '',
+        this.timeStyle || '',
+        this.weekday || '',
+        this.era || '',
+        this.year || '',
+        this.month || '',
+        this.day || '',
+        this.hour || '',
+        this.minute || '',
+        this.second || '',
+        this.timeZoneName || '',
+        this.timeZone || '',
+        this.hourFormat || ''
+      );
+    } else {
+      parts.push(
+        String(this.noGrouping),
+        this.currency || '',
+        this.currencyDisplay || '',
+        String(this.minimumIntegerDigits || ''),
+        String(this.minimumFractionDigits || ''),
+        String(this.maximumFractionDigits || ''),
+        String(this.minimumSignificantDigits || ''),
+        String(this.maximumSignificantDigits || '')
+      );
+    }
+    
+    return parts.join('|');
+  }
+
+  /**
+   * Dispatch a format error event
+   */
+  private _dispatchError(type: 'date' | 'number', error: Error): void {
+    this.dispatchEvent(new CustomEvent('format-error', {
+      detail: { type, error: error.message },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  /**
+   * Validate component properties based on type
+   */
+  private _validate(): { valid: boolean; error?: string } {
+    if (this.type === 'currency' && !this.currency) {
+      return { valid: false, error: 'Currency type requires a currency code' };
+    }
+    
+    if (this.type === 'date') {
+      const dateValue = this.date || this.value;
+      if (!dateValue) {
+        return { valid: false, error: 'Date type requires a date value' };
+      }
+    } else {
+      if (this.value === undefined || this.value === null) {
+        return { valid: false, error: `${this.type} type requires a value` };
+      }
+    }
+    
+    return { valid: true };
+  }
+
+  /**
+   * Format a date value using Intl.DateTimeFormat
+   */
+  private _formatDate(): string {
+    const validation = this._validate();
+    if (!validation.valid) {
+      this._dispatchError('date', new Error(validation.error));
+      return '';
+    }
+
+    const dateValue = this.date || this.value;
+    const date = new Date(dateValue);
+
+    // Check for invalid date
+    if (isNaN(date.getTime())) {
+      this._dispatchError('date', new Error('Invalid date'));
+      return '';
+    }
+
+    const hour12 = this.hourFormat === 'auto' ? undefined : this.hourFormat === '12';
+
+    const options: Intl.DateTimeFormatOptions = {
+      dateStyle: this.dateStyle,
+      timeStyle: this.timeStyle,
+      weekday: this.weekday,
+      era: this.era,
+      year: this.year,
+      month: this.month,
+      day: this.day,
+      hour: this.hour,
+      minute: this.minute,
+      second: this.second,
+      timeZoneName: this.timeZoneName,
+      timeZone: this.timeZone,
+      hour12: hour12,
+    };
+
+    // Remove undefined values
+    Object.keys(options).forEach(key => {
+      if (options[key as keyof Intl.DateTimeFormatOptions] === undefined) {
+        delete options[key as keyof Intl.DateTimeFormatOptions];
+      }
+    });
+
+    try {
+      // Use cache for better performance
+      const cacheKey = this._getCacheKey();
+      let formatter = this._formatterCache.get(cacheKey) as Intl.DateTimeFormat;
+      
+      if (!formatter) {
+        formatter = new Intl.DateTimeFormat(this._getLocale(), options);
+        this._formatterCache.set(cacheKey, formatter);
+      }
+      
+      return formatter.format(date);
+    } catch (error) {
+      this._dispatchError('date', error as Error);
+      return '';
+    }
+  }
+
+  /**
+   * Format a number value using Intl.NumberFormat
+   */
+  private _formatNumber(): string {
+    const validation = this._validate();
+    if (!validation.valid) {
+      this._dispatchError('number', new Error(validation.error));
+      return '';
+    }
+
+    const numValue = typeof this.value === 'string' ? parseFloat(this.value) : Number(this.value);
+
+    // Check for invalid number
+    if (isNaN(numValue)) {
+      this._dispatchError('number', new Error('Invalid number'));
+      return '';
+    }
+
+    const style = this.type === 'percent' ? 'percent' : this.type === 'currency' ? 'currency' : 'decimal';
+
+    const options: Intl.NumberFormatOptions = {
+      style,
+      currency: this.currency,
+      currencyDisplay: this.currencyDisplay,
+      useGrouping: !this.noGrouping,
+      minimumIntegerDigits: this.minimumIntegerDigits,
+      minimumFractionDigits: this.minimumFractionDigits,
+      maximumFractionDigits: this.maximumFractionDigits,
+      minimumSignificantDigits: this.minimumSignificantDigits,
+      maximumSignificantDigits: this.maximumSignificantDigits,
+    };
+
+    // Remove undefined values
+    Object.keys(options).forEach(key => {
+      if (options[key as keyof Intl.NumberFormatOptions] === undefined) {
+        delete options[key as keyof Intl.NumberFormatOptions];
+      }
+    });
+
+    try {
+      // Use cache for better performance
+      const cacheKey = this._getCacheKey();
+      let formatter = this._formatterCache.get(cacheKey) as Intl.NumberFormat;
+      
+      if (!formatter) {
+        formatter = new Intl.NumberFormat(this._getLocale(), options);
+        this._formatterCache.set(cacheKey, formatter);
+      }
+      
+      return formatter.format(numValue);
+    } catch (error) {
+      this._dispatchError('number', error as Error);
+      return '';
+    }
+  }
+
+  /**
+   * Render the formatted value
+   */
+  render() {
+    const validation = this._validate();
+    if (!validation.valid) {
+      return html`<span part="error"></span>`;
+    }
+
+    let formattedValue = '';
+
+    if (this.type === 'date') {
+      formattedValue = this._formatDate();
+      const dateValue = this.date || this.value;
+      const date = new Date(dateValue);
+      
+      if (!isNaN(date.getTime())) {
+        return html`<time part="date-time" datetime="${date.toISOString()}">${formattedValue}</time>`;
+      }
+    } else {
+      formattedValue = this._formatNumber();
+      return html`<span part="${this.type}">${formattedValue}</span>`;
+    }
+
+    return html`${formattedValue}`;
+  }
+
+  /**
+   * Clean up formatter cache when component is removed
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._formatterCache.clear();
+  }
+}

package/src/components/IntlFormatter/react/ReactIntlFormatter.tsx

@@ -0,0 +1,17 @@
+import { createComponent } from "@lit/react";
+import React from "react";
+import {
+  IntlFormatter,
+  type IntlFormatterProps,
+} from "../core/IntlFormatter.js";
+
+export type { IntlFormatterProps };
+
+export const ReactIntlFormatter = createComponent({
+  tagName: "ag-intl-formatter",
+  elementClass: IntlFormatter,
+  react: React,
+  events: {
+    onFormatError: "format-error",
+  },
+});

package/src/components/IntlFormatter/vue/VueIntlFormatter.vue

@@ -0,0 +1,88 @@
+<template>
+  <ag-intl-formatter
+    ref="formatterRef"
+    :type="type"
+    :value="value"
+    :lang="lang"
+    :date="date"
+    :weekday="weekday"
+    :era="era"
+    :year="year"
+    :month="month"
+    :day="day"
+    :hour="hour"
+    :minute="minute"
+    :second="second"
+    :timeZoneName="timeZoneName"
+    :timeZone="timeZone"
+    :hourFormat="hourFormat"
+    :dateStyle="dateStyle"
+    :timeStyle="timeStyle"
+    .noGrouping="noGrouping"
+    :currency="currency"
+    :currencyDisplay="currencyDisplay"
+    :minimumIntegerDigits="minimumIntegerDigits"
+    :minimumFractionDigits="minimumFractionDigits"
+    :maximumFractionDigits="maximumFractionDigits"
+    :minimumSignificantDigits="minimumSignificantDigits"
+    :maximumSignificantDigits="maximumSignificantDigits"
+    @format-error="handleFormatError"
+    v-bind="$attrs"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { IntlFormatterProps } from "../core/IntlFormatter";
+import "../core/IntlFormatter"; // Registers the ag-intl-formatter web component
+
+/**
+ * Vue IntlFormatter Props
+ * Following AgnosticUI v2 event conventions:
+ * - Omit callback props (Vue uses emits)
+ */
+type VueIntlFormatterProps = Omit<IntlFormatterProps, "onFormatError">;
+
+// Define props with defaults
+const props = withDefaults(defineProps<VueIntlFormatterProps>(), {
+  type: "date",
+  lang: undefined,
+  value: undefined,
+  date: undefined,
+  weekday: undefined,
+  era: undefined,
+  year: undefined,
+  month: undefined,
+  day: undefined,
+  hour: undefined,
+  minute: undefined,
+  second: undefined,
+  timeZoneName: undefined,
+  timeZone: undefined,
+  hourFormat: "auto",
+  dateStyle: undefined,
+  timeStyle: undefined,
+  noGrouping: false,
+  currency: "USD",
+  currencyDisplay: "symbol",
+  minimumIntegerDigits: undefined,
+  minimumFractionDigits: undefined,
+  maximumFractionDigits: undefined,
+  minimumSignificantDigits: undefined,
+  maximumSignificantDigits: undefined,
+});
+
+// Define emits
+const emit = defineEmits<{
+  "format-error": [detail: { type: "date" | "number"; error: string }];
+}>();
+
+// Template ref
+const formatterRef = ref<HTMLElement>();
+
+// Event handlers
+const handleFormatError = (event: Event) => {
+  const customEvent = event as CustomEvent<{ type: "date" | "number"; error: string }>;
+  emit("format-error", customEvent.detail);
+};
+</script>