@vekron/vekron-ui 0.0.0-stage → 0.1.0

package/src/dialog/dialog.component.ts

@@ -0,0 +1,77 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  effect,
+  input,
+  model,
+  viewChild,
+} from '@angular/core';
+import { UiButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'ui-dialog',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UiButtonComponent],
+  template: `
+    <dialog
+      #dialog
+      class="w-full max-w-lg rounded-ui border border-border bg-card p-6 text-card-foreground shadow-lg backdrop:bg-black/40"
+      (click)="onBackdrop($event)"
+      (close)="handleClose()"
+    >
+      <div class="flex flex-col gap-4">
+        @if (closable()) {
+          <div class="flex justify-end">
+            <ui-button variant="ghost" size="icon" aria-label="Cerrar" (pressed)="close()">×</ui-button>
+          </div>
+        }
+        <ng-content />
+      </div>
+    </dialog>
+  `,
+})
+export class UiDialogComponent {
+  readonly open = model(false);
+  readonly closable = input(true);
+  private readonly dialogElement = viewChild<ElementRef<HTMLDialogElement>>('dialog');
+
+  constructor() {
+    effect(() => {
+      const dialog = this.dialogElement();
+      if (dialog === undefined) {
+        return;
+      }
+      const element = dialog.nativeElement;
+      if (this.open()) {
+        if (element.open) {
+          return;
+        }
+        element.showModal();
+        return;
+      }
+      if (!element.open) {
+        return;
+      }
+      element.close();
+    });
+  }
+
+  close(): void {
+    this.open.set(false);
+  }
+
+  onBackdrop(event: MouseEvent): void {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    this.close();
+  }
+
+  handleClose(): void {
+    if (!this.open()) {
+      return;
+    }
+    this.open.set(false);
+  }
+}

package/src/dialog/public-api.ts

@@ -0,0 +1 @@
+export { UiDialogComponent } from './dialog.component';

package/src/divider/divider.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'ui-divider',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div role="separator" [attr.aria-orientation]="orientation()" [class]="lineClass()"></div>`,
+})
+export class UiDividerComponent {
+  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
+
+  lineClass(): string {
+    if (this.orientation() === 'vertical') {
+      return 'mx-2 h-full min-h-4 w-px bg-border';
+    }
+    return 'my-2 h-px w-full bg-border';
+  }
+}

package/src/divider/public-api.ts

@@ -0,0 +1 @@
+export { UiDividerComponent } from './divider.component';

package/src/file-upload/file-upload.component.ts

@@ -0,0 +1,110 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  forwardRef,
+  input,
+  model,
+  viewChild,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { UiButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'ui-file-upload',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UiButtonComponent],
+  template: `
+    <div
+      class="flex w-full flex-col gap-3 rounded-ui border border-dashed border-border p-6"
+      (dragover)="onDragOver($event)"
+      (drop)="onDrop($event)"
+    >
+      <p class="text-sm text-muted-foreground">Arrastra archivos o elige desde el equipo.</p>
+      <ui-button variant="outline" (pressed)="openPicker()">Elegir archivos</ui-button>
+      <input
+        #picker
+        class="hidden"
+        type="file"
+        [accept]="accept()"
+        [multiple]="multiple()"
+        (change)="onFiles($event)"
+      />
+      <ul class="flex flex-col gap-1 text-sm">
+        @for (file of files(); track file.name) {
+          <li>{{ file.name }}</li>
+        }
+      </ul>
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiFileUploadComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiFileUploadComponent implements ControlValueAccessor {
+  readonly files = model<readonly File[]>([]);
+  readonly multiple = input(false);
+  readonly accept = input('');
+  private readonly picker = viewChild<ElementRef<HTMLInputElement>>('picker');
+  private onChange: (value: readonly File[]) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+
+  openPicker(): void {
+    const picker = this.picker();
+    if (picker === undefined) {
+      throw new Error('ui-file-upload no encontró el input de archivos.');
+    }
+    picker.nativeElement.click();
+  }
+
+  onDragOver(event: DragEvent): void {
+    event.preventDefault();
+  }
+
+  onDrop(event: DragEvent): void {
+    event.preventDefault();
+    const transfer = event.dataTransfer;
+    if (transfer === null) {
+      return;
+    }
+    this.commit(transfer.files);
+  }
+
+  onFiles(event: Event): void {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement)) {
+      throw new Error('ui-file-upload esperaba un HTMLInputElement.');
+    }
+    this.commit(target.files);
+  }
+
+  writeValue(value: readonly File[] | null): void {
+    if (value === null) {
+      this.files.set([]);
+      return;
+    }
+    this.files.set(value);
+  }
+
+  registerOnChange(fn: (value: readonly File[]) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  private commit(list: FileList | null): void {
+    if (list === null) {
+      return;
+    }
+    const files = Array.from(list);
+    this.files.set(files);
+    this.onChange(files);
+    this.onTouched();
+  }
+}

package/src/file-upload/public-api.ts

@@ -0,0 +1 @@
+export { UiFileUploadComponent } from './file-upload.component';

package/src/input-number/input-number.component.ts

@@ -0,0 +1,123 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { uiFieldClass, uiLabelClass } from '../utils/classes';
+
+@Component({
+  selector: 'ui-input-number',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="flex w-full flex-col gap-1.5">
+      @if (label().length > 0) {
+        <label [class]="labelClass" [attr.for]="resolvedId()">{{ label() }}</label>
+      }
+      <input
+        [id]="resolvedId()"
+        type="number"
+        [attr.name]="resolvedName()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [readOnly]="readOnly()"
+        [attr.min]="min()"
+        [attr.max]="max()"
+        [attr.step]="step()"
+        [value]="displayValue()"
+        [class]="fieldClass"
+        (input)="onInput($event)"
+        (blur)="markTouched()"
+      />
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiInputNumberComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiInputNumberComponent implements ControlValueAccessor {
+  readonly value = model<number | null>(null);
+  readonly label = input('');
+  readonly placeholder = input('');
+  readonly name = input('');
+  readonly inputId = input('');
+  readonly min = input<number | null>(null);
+  readonly max = input<number | null>(null);
+  readonly step = input(1);
+  readonly readOnly = input(false);
+  readonly disabled = input(false);
+  private readonly formDisabled = signal(false);
+  private readonly generatedId = crypto.randomUUID();
+  private onChange: (value: number | null) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+  readonly fieldClass = uiFieldClass;
+  readonly labelClass = uiLabelClass;
+  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());
+  readonly resolvedId = computed(() => {
+    const provided = this.inputId();
+    if (provided.length > 0) {
+      return provided;
+    }
+    return this.generatedId;
+  });
+  readonly resolvedName = computed(() => {
+    const name = this.name();
+    if (name.length === 0) {
+      return null;
+    }
+    return name;
+  });
+  readonly displayValue = computed(() => {
+    const current = this.value();
+    if (current === null) {
+      return '';
+    }
+    return String(current);
+  });
+
+  onInput(event: Event): void {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement)) {
+      throw new Error('ui-input-number esperaba un HTMLInputElement.');
+    }
+    if (target.value.length === 0) {
+      this.value.set(null);
+      this.onChange(null);
+      return;
+    }
+    const parsed = Number(target.value);
+    if (Number.isNaN(parsed)) {
+      throw new Error('ui-input-number recibió un valor que no es numérico.');
+    }
+    this.value.set(parsed);
+    this.onChange(parsed);
+  }
+
+  markTouched(): void {
+    this.onTouched();
+  }
+
+  writeValue(value: number | null): void {
+    this.value.set(value);
+  }
+
+  registerOnChange(fn: (value: number | null) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+}

package/src/input-number/public-api.ts

@@ -0,0 +1 @@
+export { UiInputNumberComponent } from './input-number.component';

package/src/input-otp/input-otp.component.ts

@@ -0,0 +1,129 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  input,
+  model,
+  signal,
+  viewChildren,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { uiLabelClass } from '../utils/classes';
+
+@Component({
+  selector: 'ui-input-otp',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="flex w-full flex-col gap-1.5">
+      @if (label().length > 0) {
+        <label [class]="labelClass">{{ label() }}</label>
+      }
+      <div class="flex gap-2">
+        @for (index of slots(); track index) {
+          <input
+            #slot
+            class="h-12 w-10 rounded-ui border border-input bg-background text-center text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            inputmode="numeric"
+            maxlength="1"
+            [value]="charAt(index)"
+            [disabled]="isDisabled()"
+            (input)="onSlot($event, index)"
+            (keydown)="onKeyDown($event, index)"
+            (blur)="markTouched()"
+          />
+        }
+      </div>
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiInputOtpComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiInputOtpComponent implements ControlValueAccessor {
+  readonly value = model('');
+  readonly label = input('');
+  readonly length = input(6);
+  readonly disabled = input(false);
+  private readonly formDisabled = signal(false);
+  private readonly slotsRef = viewChildren<ElementRef<HTMLInputElement>>('slot');
+  private onChange: (value: string) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+  readonly labelClass = uiLabelClass;
+  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());
+  readonly slots = computed(() => {
+    const length = this.length();
+    if (length < 1) {
+      throw new Error('ui-input-otp length debe ser mayor a 0.');
+    }
+    return Array.from({ length }, (_, index) => index);
+  });
+
+  charAt(index: number): string {
+    const char = this.value()[index];
+    if (char === undefined) {
+      return '';
+    }
+    return char;
+  }
+
+  onSlot(event: Event, index: number): void {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement)) {
+      throw new Error('ui-input-otp esperaba un HTMLInputElement.');
+    }
+    const chars = this.value().split('');
+    chars[index] = target.value.slice(-1);
+    const next = chars.join('');
+    this.value.set(next);
+    this.onChange(next);
+    const following = this.slotsRef()[index + 1];
+    if (following === undefined) {
+      return;
+    }
+    following.nativeElement.focus();
+  }
+
+  onKeyDown(event: KeyboardEvent, index: number): void {
+    if (event.key !== 'Backspace') {
+      return;
+    }
+    if (this.charAt(index).length > 0) {
+      return;
+    }
+    const previous = this.slotsRef()[index - 1];
+    if (previous === undefined) {
+      return;
+    }
+    previous.nativeElement.focus();
+  }
+
+  markTouched(): void {
+    this.onTouched();
+  }
+
+  writeValue(value: string | null): void {
+    if (value === null) {
+      this.value.set('');
+      return;
+    }
+    this.value.set(value);
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+}

package/src/input-otp/public-api.ts

@@ -0,0 +1 @@
+export { UiInputOtpComponent } from './input-otp.component';

package/src/input-password/input-password.component.ts

@@ -0,0 +1,127 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { uiFieldClass, uiLabelClass } from '../utils/classes';
+
+@Component({
+  selector: 'ui-input-password',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="flex w-full flex-col gap-1.5">
+      @if (label().length > 0) {
+        <label [class]="labelClass" [attr.for]="resolvedId()">{{ label() }}</label>
+      }
+      <div class="relative">
+        <input
+          [id]="resolvedId()"
+          [attr.name]="resolvedName()"
+          [type]="fieldType()"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [value]="value()"
+          [class]="fieldClass + ' pr-20'"
+          (input)="onInput($event)"
+          (blur)="markTouched()"
+        />
+        <button
+          type="button"
+          class="absolute top-1/2 right-2 -translate-y-1/2 text-xs text-muted-foreground"
+          (click)="visible.set(!visible())"
+        >
+          {{ visibilityLabel() }}
+        </button>
+      </div>
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiInputPasswordComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiInputPasswordComponent implements ControlValueAccessor {
+  readonly value = model('');
+  readonly label = input('');
+  readonly placeholder = input('');
+  readonly name = input('');
+  readonly inputId = input('');
+  readonly disabled = input(false);
+  readonly visible = signal(false);
+  private readonly formDisabled = signal(false);
+  private readonly generatedId = crypto.randomUUID();
+  private onChange: (value: string) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+  readonly fieldClass = uiFieldClass;
+  readonly labelClass = uiLabelClass;
+  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());
+  readonly resolvedId = computed(() => {
+    const provided = this.inputId();
+    if (provided.length > 0) {
+      return provided;
+    }
+    return this.generatedId;
+  });
+  readonly resolvedName = computed(() => {
+    const name = this.name();
+    if (name.length === 0) {
+      return null;
+    }
+    return name;
+  });
+
+  fieldType(): 'password' | 'text' {
+    if (this.visible()) {
+      return 'text';
+    }
+    return 'password';
+  }
+
+  visibilityLabel(): string {
+    if (this.visible()) {
+      return 'Ocultar';
+    }
+    return 'Mostrar';
+  }
+
+  onInput(event: Event): void {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement)) {
+      throw new Error('ui-input-password esperaba un HTMLInputElement.');
+    }
+    this.value.set(target.value);
+    this.onChange(target.value);
+  }
+
+  markTouched(): void {
+    this.onTouched();
+  }
+
+  writeValue(value: string | null): void {
+    if (value === null) {
+      this.value.set('');
+      return;
+    }
+    this.value.set(value);
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+}

package/src/input-password/public-api.ts

@@ -0,0 +1 @@
+export { UiInputPasswordComponent } from './input-password.component';