@mimi-ng/cli 0.4.0 → 0.5.0

package/dist/templates/blocks/table-01/table-01.ts

@@ -0,0 +1,266 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  LOCALE_ID,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { MimiBadge, type BadgeTone } from '@/components/ui/badge';
+import { MimiButton } from '@/components/ui/button';
+import { MimiCheckbox } from '@/components/ui/checkbox';
+import {
+  MimiDataTableImports,
+  type MimiTableColumn,
+  type MimiTableFilterOption,
+} from '@/components/ui/data-table';
+import { MimiInput } from '@/components/ui/input';
+import { cn } from '@/components/ui/utils/cn';
+
+export type Table01Status = 'active' | 'trial' | 'past-due' | 'canceled';
+
+export interface Table01Customer {
+  /** Identificador estable (sale en `deleted` y `exported`). */
+  id: number;
+  name: string;
+  email: string;
+  status: Table01Status;
+  plan: string;
+  /** Ingreso mensual recurrente. */
+  mrr: number;
+  users: number;
+  country: string;
+}
+
+/** Cuenta de cada estado en el resumen y en las píldoras de la lista móvil. */
+const STATUSES: { id: Table01Status; label: string; plural: string; tone: BadgeTone }[] = [
+  { id: 'active', label: 'Active', plural: 'Active', tone: 'success' },
+  { id: 'trial', label: 'Trial', plural: 'Trial', tone: 'info' },
+  { id: 'past-due', label: 'Past due', plural: 'Past due', tone: 'warning' },
+  { id: 'canceled', label: 'Canceled', plural: 'Canceled', tone: 'danger' },
+];
+
+const NAMES = [
+  'Hotel Brisa',
+  'Café Altura',
+  'Taller Motor',
+  'Grupo Talento',
+  'Óptica Clara',
+  'Editorial Faro',
+  'Clínica Sol',
+  'Panadería Trigo',
+  'Estudio Norte',
+];
+const PLANS = ['Starter', 'Team', 'Enterprise'];
+const COUNTRIES = ['Colombia', 'México', 'Chile', 'Perú'];
+const SEQUENCE: Table01Status[] = ['active', 'trial', 'active', 'past-due', 'active', 'canceled'];
+
+/** 36 clientes de ejemplo, siempre los mismos, para que la pantalla funcione sin datos. */
+export const TABLE_01_CUSTOMERS: Table01Customer[] = Array.from({ length: 36 }, (_, i) => {
+  const name = `${NAMES[i % NAMES.length]} ${Math.floor(i / NAMES.length) + 1}`;
+  return {
+    id: i + 1,
+    name,
+    email: `hello@${name
+      .normalize('NFD')
+      .replace(/[̀-ͯ]/g, '')
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')}.com`,
+    status: SEQUENCE[i % SEQUENCE.length],
+    plan: PLANS[i % PLANS.length],
+    mrr: 300 + ((i * 7919) % 180) * 40,
+    users: 2 + ((i * 13) % 60),
+    country: COUNTRIES[i % COUNTRIES.length],
+  };
+});
+
+/**
+ * table-01 (Block de Mimi): la pantalla «Clientes». En escritorio, un resumen por estado y la
+ * Data Table de Mimi (buscar, filtrar por estado o plan, ordenar, paginar y elegir filas con sus
+ * acciones); en móvil, una lista de tarjetas con búsqueda, píldoras de estado y una barra de
+ * acciones. Diseño: docs/design/Block table-01.dc.html.
+ *
+ * Es una página: `ng g mimi table-01` la genera en tu carpeta de páginas (`aliases.pages` de
+ * mimi.json; por defecto, `src/app/pages/table/`, u otro nombre con `--name`) junto con su
+ * archivo de rutas (`table.routes.ts`, con la página en carga diferida), y te da la línea para
+ * `app.routes.ts`:
+ *
+ * ```ts
+ * { path: 'table', loadChildren: () => import('./pages/table/table.routes').then((m) => m.TABLE_ROUTES) },
+ * ```
+ *
+ * El archivo es tuyo: da tus clientes con `customers` (sin ellos, los de ejemplo), conecta
+ * «New customer», «Import CSV», «Export» y «Delete» a tu servicio con sus salidas, o cambia las
+ * columnas. Con muchos clientes, usa la Data Table en modo servidor (`[total]`).
+ *
+ * ```html
+ * <mimi-table-01 [customers]="customers" (deleted)="remove($event)" (newCustomer)="create()" />
+ * ```
+ */
+@Component({
+  selector: 'mimi-table-01',
+  imports: [MimiBadge, MimiButton, MimiCheckbox, MimiDataTableImports, MimiInput],
+  templateUrl: './table-01.html',
+  host: { '[class]': 'classes()' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Table01 {
+  readonly customers = input<readonly Table01Customer[]>(TABLE_01_CUSTOMERS);
+  /** Moneda del ingreso mensual (ISO 4217). */
+  readonly currency = input('USD');
+  /** Idioma de los números. Por defecto, el `LOCALE_ID` de la app. */
+  readonly locale = input<string | undefined>(undefined);
+  /** Ids de las filas elegidas. Admite `[(selection)]`. */
+  readonly selection = model<unknown[]>([]);
+  readonly userClass = input('', { alias: 'class' });
+
+  /** «New customer». */
+  readonly newCustomer = output<void>();
+  /** «Import CSV» (solo en escritorio). */
+  readonly importCsv = output<void>();
+  /** «Export» con filas elegidas: sus ids. */
+  readonly exported = output<unknown[]>();
+  /** «Delete» con filas elegidas: sus ids. La pantalla no las quita: lo haces tú en `customers`. */
+  readonly deleted = output<unknown[]>();
+
+  private readonly appLocale = inject(LOCALE_ID);
+  protected readonly statuses = STATUSES;
+
+  /** La búsqueda y el estado elegido de la lista móvil. */
+  protected readonly query = model('');
+  protected readonly statusFilter = model<Table01Status | null>(null);
+
+  private readonly money = computed(
+    () =>
+      new Intl.NumberFormat(this.locale() ?? this.appLocale, {
+        style: 'currency',
+        currency: this.currency(),
+        maximumFractionDigits: 0,
+      }),
+  );
+
+  protected format(amount: number): string {
+    return this.money().format(amount);
+  }
+
+  /** El punto de color de cada estado (clases literales para Tailwind). */
+  protected dotClass(tone: BadgeTone): string {
+    return (
+      {
+        success: 'bg-success',
+        info: 'bg-info',
+        warning: 'bg-warning',
+        danger: 'bg-destructive',
+        primary: 'bg-primary',
+        secondary: 'bg-secondary',
+      } satisfies Record<BadgeTone, string>
+    )[tone];
+  }
+
+  protected statusOf(status: Table01Status) {
+    return STATUSES.find((s) => s.id === status)!;
+  }
+
+  /** Cuántos clientes hay de cada estado. */
+  protected readonly counts = computed(() =>
+    STATUSES.map((s) => ({
+      ...s,
+      count: this.customers().filter((c) => c.status === s.id).length,
+    })),
+  );
+
+  protected readonly subtitle = computed(() => {
+    const customers = this.customers();
+    const mrr = customers.reduce((sum, c) => sum + c.mrr, 0);
+    return `${customers.length} accounts · ${this.format(mrr)} MRR`;
+  });
+
+  protected readonly columns = computed<MimiTableColumn<Table01Customer>[]>(() => {
+    const options = (values: string[], label: (v: string) => string): MimiTableFilterOption[] =>
+      values.map((value) => ({ value, label: label(value) }));
+    return [
+      { id: 'name', header: 'Customer', sortable: true, sticky: true, width: '280px' },
+      {
+        id: 'status',
+        header: 'Status',
+        width: '130px',
+        filterOptions: options(
+          STATUSES.map((s) => s.id),
+          (id) => this.statusOf(id as Table01Status).label,
+        ),
+        value: (row) => row.status,
+      },
+      {
+        id: 'plan',
+        header: 'Plan',
+        width: '130px',
+        filterOptions: options(PLANS, (p) => p),
+      },
+      {
+        id: 'mrr',
+        header: 'MRR',
+        sortable: true,
+        align: 'end',
+        width: '120px',
+        searchable: false,
+      },
+      {
+        id: 'users',
+        header: 'Users',
+        sortable: true,
+        align: 'end',
+        width: '100px',
+        searchable: false,
+      },
+      { id: 'country', header: 'Country', sortable: true, width: '140px' },
+    ];
+  });
+
+  /** La lista móvil: la búsqueda (sin tildes) y el estado elegido. */
+  protected readonly list = computed(() => {
+    const fold = (t: string) => t.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+    const q = fold(this.query().trim());
+    const status = this.statusFilter();
+    return this.customers().filter(
+      (c) => (!status || c.status === status) && (!q || fold(c.name).includes(q)),
+    );
+  });
+
+  protected readonly listIds = computed(() => this.list().map((c) => c.id));
+  protected readonly allState = computed<'all' | 'some' | 'none'>(() => {
+    const ids = this.listIds();
+    const n = ids.filter((id) => this.selection().includes(id)).length;
+    return n === 0 ? 'none' : n === ids.length ? 'all' : 'some';
+  });
+
+  protected readonly classes = computed(() =>
+    cn('flex w-full flex-col bg-background text-foreground', this.userClass()),
+  );
+
+  protected isSelected(id: number): boolean {
+    return this.selection().includes(id);
+  }
+
+  protected toggle(id: number): void {
+    this.selection.update((ids) => (ids.includes(id) ? ids.filter((x) => x !== id) : [...ids, id]));
+  }
+
+  protected toggleAll(checked: boolean): void {
+    const ids = this.listIds();
+    this.selection.update((sel) =>
+      checked
+        ? [...sel, ...ids.filter((id) => !sel.includes(id))]
+        : sel.filter((id) => !ids.includes(id as number)),
+    );
+  }
+
+  protected pickStatus(status: Table01Status | null): void {
+    this.statusFilter.set(this.statusFilter() === status ? null : status);
+  }
+
+  protected selectedText(count: number): string {
+    return count === 1 ? '1 selected' : `${count} selected`;
+  }
+}

package/dist/templates/components/checkbox/checkbox.ts

@@ -20,6 +20,18 @@ import {
 
 let nextId = 0;
 
+/**
+ * La caja de la casilla (16px; marcada o mixta, `primary` con su sombra), según su
+ * `data-state="checked | indeterminate | unchecked"`. La usa también el Tree para dibujar sus
+ * casillas sin un control enfocable dentro del nodo (plan, G3.1-d).
+ */
+export const MIMI_CHECKBOX_BOX_STYLES = cn(
+  'inline-flex size-[var(--mimi-checkbox-size,1rem)] shrink-0 items-center justify-center rounded-[var(--mimi-checkbox-radius,var(--mimi-radius-sm))] border border-[color:var(--mimi-checkbox-border,var(--mimi-input))] bg-input-background text-[color:var(--mimi-checkbox-check,var(--mimi-primary-foreground))]',
+  'mimi-transition active:scale-(--mimi-press-scale-sm)',
+  'data-[state=checked]:border-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=checked]:bg-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=checked]:shadow-primary',
+  'data-[state=indeterminate]:border-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=indeterminate]:bg-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=indeterminate]:shadow-primary',
+);
+
 /**
  * Casilla de verificación (docs/design/Mimi Componentes.dc.html, sección 7):
  * `<mimi-checkbox [(checked)]="recordarme">Recordarme</mimi-checkbox>`.
@@ -148,12 +160,9 @@ export class MimiCheckbox implements FormCheckboxControl, MimiFieldControl {
     cn('inline-flex items-center gap-2.5 text-sm', this.userClass()),
   );
 
-  // Caja de 16px. Marcada o mixta: primary con su sombra. Foco: borde ring (sin marcar) y contorno.
   protected readonly boxClasses = cn(
-    'peer inline-flex size-[var(--mimi-checkbox-size,1rem)] shrink-0 items-center justify-center rounded-[var(--mimi-checkbox-radius,var(--mimi-radius-sm))] border border-[color:var(--mimi-checkbox-border,var(--mimi-input))] bg-input-background text-[color:var(--mimi-checkbox-check,var(--mimi-primary-foreground))]',
-    'mimi-transition active:scale-(--mimi-press-scale-sm)',
-    'data-[state=checked]:border-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=checked]:bg-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=checked]:shadow-primary',
-    'data-[state=indeterminate]:border-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=indeterminate]:bg-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=indeterminate]:shadow-primary',
+    'peer',
+    MIMI_CHECKBOX_BOX_STYLES,
     'data-[state=unchecked]:focus-visible:border-ring data-[state=unchecked]:aria-invalid:border-destructive',
     'disabled:shadow-none',
     buttonFocusStyles,

package/dist/templates/components/command/command-texts.ts

@@ -0,0 +1,65 @@
+import { InjectionToken, type Provider } from '@angular/core';
+
+/*
+ * Textos de Command, en archivo propio y sin @angular/aria ni el cdk: así se pueden proveer en
+ * `app.config.ts` sin llevar la paleta al chunk inicial.
+ */
+
+/** Textos que la paleta muestra o anuncia. */
+export interface MimiCommandText {
+  /** Texto del buscador vacío. */
+  placeholder: string;
+  /** Nombre del diálogo y de la lista, si no se da `aria-label`. */
+  label: string;
+  /** Ayuda del pie: las flechas. */
+  navigate: string;
+  /** Ayuda del pie: Enter. */
+  run: string;
+  /** Número de resultados (pie y región `status`). */
+  results: (count: number) => string;
+  /** Título de «sin resultados». */
+  noResults: (query: string) => string;
+  /** Texto de «sin resultados». */
+  noResultsHint: string;
+}
+
+/** Textos predeterminados (inglés). */
+export const MIMI_COMMAND_TEXT_EN: MimiCommandText = {
+  placeholder: 'Type a command or search…',
+  label: 'Command palette',
+  navigate: 'Navigate',
+  run: 'Open',
+  results: (count) => (count === 1 ? '1 result' : `${count} results`),
+  noResults: (query) => `No results for “${query}”`,
+  noResultsHint: 'Check the spelling or try another word.',
+};
+
+/** Textos en español: `provideMimiCommandText(MIMI_COMMAND_TEXT_ES)`. */
+export const MIMI_COMMAND_TEXT_ES: MimiCommandText = {
+  placeholder: 'Escribe un comando o busca…',
+  label: 'Paleta de comandos',
+  navigate: 'Navegar',
+  run: 'Abrir',
+  results: (count) => (count === 1 ? '1 resultado' : `${count} resultados`),
+  noResults: (query) => `Sin resultados para «${query}»`,
+  noResultsHint: 'Revisa la ortografía o prueba con otra palabra.',
+};
+
+/** Textos activos. Sin `provideMimiCommandText`, los predeterminados en inglés. */
+export const MIMI_COMMAND_TEXT = new InjectionToken<MimiCommandText>('MIMI_COMMAND_TEXT', {
+  providedIn: 'root',
+  factory: () => MIMI_COMMAND_TEXT_EN,
+});
+
+/**
+ * Cambia los textos de Command. Lo que no definas sigue en inglés:
+ *
+ * ```ts
+ * provideMimiCommandText(MIMI_COMMAND_TEXT_ES)
+ * ```
+ *
+ * Va en `app.config.ts` o en los `providers` de un componente o ruta.
+ */
+export function provideMimiCommandText(text: Partial<MimiCommandText>): Provider {
+  return { provide: MIMI_COMMAND_TEXT, useValue: { ...MIMI_COMMAND_TEXT_EN, ...text } };
+}