tessl/npm-primevue

Comprehensive Vue.js UI component library with 140+ production-ready components, theming, and accessibility features

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Configuration & Theming

Name: tessl/npm-primevue
Author: tessl

Global configuration, theme management, styling utilities, and PassThrough system for deep customization of PrimeVue components and application appearance.

Capabilities

Global Configuration

PrimeVue Config

Global configuration plugin for theme settings, locale, and component defaults.

/**
 * PrimeVue global configuration
 */
import PrimeVue from "primevue/config";

interface PrimeVueConfiguration {
  ripple?: boolean;
  inputStyle?: "outlined" | "filled";
  locale?: Locale;
  filterMatchModeOptions?: object;
  zIndex?: {
    modal?: number;
    overlay?: number;
    menu?: number;
    tooltip?: number;
  };
  pt?: PassThroughOptions;
  ptOptions?: PassThroughGlobalOptions;
  unstyled?: boolean;
  csp?: {
    nonce?: string;
  };
}

// Vue 3 installation
app.use(PrimeVue, {
  ripple: true,
  inputStyle: 'outlined',
  locale: {
    startsWith: 'Starts with',
    contains: 'Contains',
    notContains: 'Not contains',
    endsWith: 'Ends with',
    equals: 'Equals',
    notEquals: 'Not equals'
  },
  pt: {
    button: {
      root: { class: 'my-button' }
    }
  }
});

Theme System

Theme Installation

CSS theme files for different design systems and color schemes.

/**
 * Theme CSS imports
 */
// Aura theme (default)
import "primevue/resources/themes/aura-light-green/theme.css";
import "primevue/resources/themes/aura-light-blue/theme.css";
import "primevue/resources/themes/aura-dark-green/theme.css";

// Material Design
import "primevue/resources/themes/md-light-indigo/theme.css";
import "primevue/resources/themes/md-dark-indigo/theme.css";

// Bootstrap
import "primevue/resources/themes/bootstrap4-light-blue/theme.css";
import "primevue/resources/themes/bootstrap4-dark-blue/theme.css";

// Core CSS (always required)
import "primevue/resources/primevue.min.css";

// Icons (optional)
import "primeicons/primeicons.css";

useStyle Composable

Composable for managing component styles and themes dynamically.

/**
 * Style management composable
 */
import { useStyle } from "primevue/usestyle";

interface UseStyleOptions {
  name?: string;
  css?: string;
  load?: boolean;
  document?: Document;
  manual?: boolean;
  media?: string;
  nonce?: string;
  first?: boolean;
  props?: object;
}

interface UseStyleReturn {
  id: string;
  name: string;
  css: Ref<string>;
  load: () => void;
  unload: () => void;
  isLoaded: Readonly<Ref<boolean>>;
}

function useStyle(css: string, options?: UseStyleOptions): UseStyleReturn;

Usage Example:

<script setup>
import { useStyle } from 'primevue/usestyle';

const { load, unload } = useStyle(`
  .custom-button {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
  }
`, { name: 'custom-button' });

// Load styles
load();

// Unload when component unmounts
onUnmounted(() => {
  unload();
});
</script>

PassThrough System

usePassThrough

Utility for merging PassThrough configurations for deep component customization.

/**
 * PassThrough configuration merger
 */
import { usePassThrough } from "primevue/passthrough";

interface PassThroughOptions {
  mergeSections?: boolean;
  mergeProps?: boolean;
}

interface PassThroughGlobalOptions {
  mergeSections?: boolean;
  mergeProps?: boolean;
  useMergeProps?: boolean;
}

function usePassThrough(
  pt1: object, 
  pt2: object, 
  options?: PassThroughOptions
): object;

PassThrough Configuration

Comprehensive system for customizing component internals without CSS.

/**
 * PassThrough configuration examples
 */

// Global PassThrough
app.use(PrimeVue, {
  pt: {
    button: {
      root: ({ props }) => ({
        class: [
          'px-4 py-2 rounded-lg',
          {
            'bg-blue-500 text-white': !props.outlined,
            'border border-blue-500 text-blue-500': props.outlined
          }
        ]
      }),
      label: { class: 'font-medium' }
    },
    inputtext: {
      root: { class: 'border-2 border-gray-300 rounded-md px-3 py-2' }
    }
  }
});

// Component-level PassThrough
// <Button :pt="{ root: { class: 'custom-button-class' } }" label="Custom" />

// Advanced PassThrough with functions
const buttonPT = {
  root: ({ props, state, context }) => ({
    class: [
      'p-button',
      {
        'p-button-loading': props.loading,
        'p-button-outlined': props.outlined,
        'p-button-raised': props.raised,
        'p-button-rounded': props.rounded,
        'p-button-text': props.text,
        'p-button-sm': props.size === 'small',
        'p-button-lg': props.size === 'large',
        'p-disabled': context.disabled
      },
      `p-button-${props.severity}`
    ],
    style: {
      transition: 'all 0.2s ease'
    }
  }),
  loadingIcon: { class: 'animate-spin' },
  icon: ({ props }) => ({
    class: [
      'p-button-icon',
      {
        'p-button-icon-left': props.iconPos === 'left',
        'p-button-icon-right': props.iconPos === 'right',
        'p-button-icon-top': props.iconPos === 'top',
        'p-button-icon-bottom': props.iconPos === 'bottom'
      }
    ]
  })
};

Styling Approaches

Styled Mode (Default)

Pre-built themes with complete styling out of the box.

/**
 * Styled mode configuration (default)
 */
// Import theme CSS
import "primevue/resources/themes/aura-light-green/theme.css";
import "primevue/resources/primevue.min.css";

// Components use pre-built styles
app.use(PrimeVue, {
  // Styled mode is default, no unstyled option needed
});

Unstyled Mode

Components without any styling for complete customization freedom.

/**
 * Unstyled mode configuration
 */
app.use(PrimeVue, {
  unstyled: true,
  pt: {
    // Define all styles via PassThrough
    button: {
      root: 'bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded',
      label: 'select-none'
    }
  }
});

CSS Variables & Design Tokens

Customization through CSS custom properties and design tokens.

/* Custom CSS variables for theme customization */
:root {
  --primary-color: #3B82F6;
  --primary-color-text: #ffffff;
  --surface-0: #ffffff;
  --surface-50: #f8fafc;
  --surface-100: #f1f5f9;
  --surface-200: #e2e8f0;
  --surface-300: #cbd5e1;
  --surface-400: #94a3b8;
  --surface-500: #64748b;
  --surface-600: #475569;
  --surface-700: #334155;
  --surface-800: #1e293b;
  --surface-900: #0f172a;
  
  --border-radius: 6px;
  --focus-ring: 0 0 0 2px #3B82F6;
  --mask-bg: rgba(0, 0, 0, 0.4);
}

/* Dark theme overrides */
[data-theme="dark"] {
  --primary-color: #60A5FA;
  --surface-0: #0f172a;
  --surface-50: #1e293b;
  --surface-100: #334155;
}

Responsive Configuration

Breakpoint System

Responsive breakpoints for component behavior.

/**
 * Responsive configuration
 */
const responsiveOptions = {
  breakpoints: {
    '1199px': {
      numVisible: 1,
      numScroll: 1
    },
    '991px': {
      numVisible: 2,
      numScroll: 1
    },
    '767px': {
      numVisible: 1,
      numScroll: 1
    }
  }
};

// Usage in components
// <Carousel :responsiveOptions="responsiveOptions" />

Types

Configuration and theming type definitions:

// Locale configuration
interface Locale {
  startsWith?: string;
  contains?: string;
  notContains?: string;
  endsWith?: string;
  equals?: string;
  notEquals?: string;
  noFilter?: string;
  filter?: string;
  lt?: string;
  lte?: string;
  gt?: string;
  gte?: string;
  dateIs?: string;
  dateIsNot?: string;
  dateBefore?: string;
  dateAfter?: string;
  clear?: string;
  apply?: string;
  matchAll?: string;
  matchAny?: string;
  addRule?: string;
  removeRule?: string;
  accept?: string;
  reject?: string;
  choose?: string;
  upload?: string;
  cancel?: string;
  completed?: string;
  pending?: string;
  fileSizeTypes?: string[];
  dayNames?: string[];
  dayNamesShort?: string[];
  dayNamesMin?: string[];
  monthNames?: string[];
  monthNamesShort?: string[];
  chooseYear?: string;
  chooseMonth?: string;
  chooseDate?: string;
  prevDecade?: string;
  nextDecade?: string;
  prevYear?: string;
  nextYear?: string;
  prevMonth?: string;
  nextMonth?: string;
  prevHour?: string;
  nextHour?: string;
  prevMinute?: string;
  nextMinute?: string;
  prevSecond?: string;
  nextSecond?: string;
  am?: string;
  pm?: string;
  today?: string;
  weekHeader?: string;
  firstDayOfWeek?: number;
  showMonthAfterYear?: boolean;
  dateFormat?: string;
  weak?: string;
  medium?: string;
  strong?: string;
  passwordPrompt?: string;
  emptyFilterMessage?: string;
  searchMessage?: string;
  selectionMessage?: string;
  emptySelectionMessage?: string;
  emptySearchMessage?: string;
  emptyMessage?: string;
  aria?: AriaLabels;
}

// ARIA labels for accessibility
interface AriaLabels {
  trueLabel?: string;
  falseLabel?: string;
  nullLabel?: string;
  star?: string;
  stars?: string;
  selectAll?: string;
  unselectAll?: string;
  close?: string;
  previous?: string;
  next?: string;
  navigation?: string;
  scrollTop?: string;
  moveTop?: string;
  moveUp?: string;
  moveDown?: string;
  moveBottom?: string;
  moveToTarget?: string;
  moveToSource?: string;
  moveAllToTarget?: string;
  moveAllToSource?: string;
  pageLabel?: string;
  firstPageLabel?: string;
  lastPageLabel?: string;
  nextPageLabel?: string;
  previousPageLabel?: string;
  rowsPerPageLabel?: string;
  jumpToPageDropdownLabel?: string;
  jumpToPageInputLabel?: string;
  selectRow?: string;
  unselectRow?: string;
  expandRow?: string;
  collapseRow?: string;
  showFilterMenu?: string;
  hideFilterMenu?: string;
  filterOperator?: string;
  filterConstraint?: string;
  editRow?: string;
  saveEdit?: string;
  cancelEdit?: string;
  listView?: string;
  gridView?: string;
  slide?: string;
  slideNumber?: string;
  zoomImage?: string;
  zoomIn?: string;
  zoomOut?: string;
  rotateRight?: string;
  rotateLeft?: string;
}

Install with Tessl CLI