or run

npx @tessl/cli init
Log in

Version

Files

docs

api-services.mdbase-classes.mdcomposables.mdconfiguration.mdindex.mdutilities.md
tile.json

task.mdevals/scenario-3/

Global UI Configuration Module

A small setup module that mounts the UI library plugin with centralized options for ripple effects, input styling, locales, theming, and pass-through behavior so every component shares the same defaults.

Capabilities

Plugin bootstrap

  • Mounts the UI plugin with ripple enabled, filled input styling, and a theme preset when no overrides are passed; a sample button rendered after install uses the ripple effect and the filled input style classes. @test

Locale overrides

  • Accepts an initial locale bundle where pagination and filtering labels are customized; reading the labels after install returns the provided text instead of the defaults. @test
  • Provides a runtime locale switch helper; after swapping to a different locale bundle, subsequent reads return the new labels without re-installing the plugin. @test

Theme and stacking updates

  • Exposes a theme swapper that replaces the active preset and stylesheet link id, while preserving overlay stacking values provided at install. @test

Pass-through and unstyled toggle

  • Allows toggling unstyled mode plus a pass-through merge option; when enabled, a sample input renders only the provided pass-through classes and omits the library's default theme classes. @test

Implementation

@generates

API

export type UiLocale = Record<string, unknown>;

export interface UiThemePreset {
  name: string;
  linkId?: string;
  cssPath?: string;
}

export interface UiConfigOptions {
  ripple?: boolean;
  inputStyle?: 'filled' | 'outlined';
  locale?: UiLocale;
  theme?: UiThemePreset;
  zIndex?: Partial<{ modal: number; overlay: number; tooltip: number; menu: number; toast: number }>; 
  passThroughMerge?: 'mergeProps' | 'mergeSections';
  unstyled?: boolean;
  cspNonce?: string;
}

export function installUiPlugin(app: unknown, options?: UiConfigOptions): void;

export function setUiLocale(locale: UiLocale): void;

export function swapUiTheme(nextTheme: UiThemePreset): Promise<void>;

export function toggleUnstyled(enabled: boolean, mergeStrategy?: 'mergeProps' | 'mergeSections'): void;

export function useUiConfig(): {
  ripple: boolean;
  inputStyle: 'filled' | 'outlined';
  locale: UiLocale;
  theme: UiThemePreset | null;
  zIndex: UiConfigOptions['zIndex'];
  unstyled: boolean;
};

Dependencies { .dependencies }

primevue { .dependency }

UI component framework and plugin used to provide global configuration, pass-through customization, and theming. @satisfied-by