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

Utility Components

Name: tessl/npm-primevue
Author: tessl

Helper components for progress indication, loading states, messages, avatars, and various UI utilities that enhance user experience and provide visual feedback.

Capabilities

Progress & Loading Components

ProgressBar

Linear progress indicator with determinate and indeterminate modes.

/**
 * Linear progress indicator
 */
import ProgressBar from "primevue/progressbar";

interface ProgressBarProps extends BaseComponentProps {
  value?: number;
  mode?: "determinate" | "indeterminate";
  showValue?: boolean;
  unit?: string;
}

ProgressSpinner

Circular loading spinner with customizable appearance.

/**
 * Circular loading spinner
 */
import ProgressSpinner from "primevue/progressspinner";

interface ProgressSpinnerProps extends BaseComponentProps {
  strokeWidth?: string;
  fill?: string;
  animationDuration?: string;
}

Skeleton

Loading placeholder with various shapes and animations.

/**
 * Loading placeholder component
 */
import Skeleton from "primevue/skeleton";

interface SkeletonProps extends BaseComponentProps {
  shape?: "rectangle" | "circle";
  size?: string;
  width?: string;
  height?: string;
  borderRadius?: string;
  animation?: "pulse" | "wave" | "none";
}

BlockUI

UI blocking overlay to prevent user interaction during processing.

/**
 * UI blocking overlay
 */
import BlockUI from "primevue/blockui";

interface BlockUIProps extends BaseComponentProps {
  blocked?: boolean;
  fullScreen?: boolean;
  baseZIndex?: number;
  autoZIndex?: boolean;
}

Message Components

Toast

Temporary notification messages with auto-dismiss and positioning.

/**
 * Toast notification container
 */
import Toast from "primevue/toast";

interface ToastProps extends BaseComponentProps {
  group?: string;
  position?: "top-right" | "top-left" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center" | "center";
  autoZIndex?: boolean;
  baseZIndex?: number;
  breakpoints?: object;
  closeIcon?: string;
  infoIcon?: string;
  warnIcon?: string;
  errorIcon?: string;
  successIcon?: string;
  closeButtonProps?: object;
}

Message

Standalone message display with severity levels and customizable content.

/**
 * Standalone message component
 */
import Message from "primevue/message";

interface MessageProps extends BaseComponentProps {
  severity?: "success" | "info" | "warn" | "error" | "secondary" | "contrast";
  closable?: boolean;
  sticky?: boolean;
  life?: number;
  icon?: string;
  closeIcon?: string;
  closeButtonProps?: object;
}

InlineMessage

Inline status messages for forms and content validation.

/**
 * Inline message for forms and validation
 */
import InlineMessage from "primevue/inlinemessage";

interface InlineMessageProps extends BaseComponentProps {
  severity?: "success" | "info" | "warn" | "error" | "secondary" | "contrast";
  icon?: string;
}

Visual Elements

Avatar

User avatar display with image, icon, or text content.

/**
 * User avatar component
 */
import Avatar from "primevue/avatar";

interface AvatarProps extends BaseComponentProps {
  label?: string;
  icon?: string;
  image?: string;
  size?: "normal" | "large" | "xlarge";
  shape?: "square" | "circle";
  template?: string;
}

AvatarGroup

Container for grouping multiple avatars with overflow handling.

/**
 * Avatar group container
 */
import AvatarGroup from "primevue/avatargroup";

interface AvatarGroupProps extends BaseComponentProps {
  // Template-based container for Avatar components
}

Badge

Small status indicator with value display and severity levels.

/**
 * Status badge component
 */
import Badge from "primevue/badge";

interface BadgeProps extends BaseComponentProps {
  value?: any;
  severity?: "secondary" | "info" | "success" | "warning" | "danger" | "contrast";
  size?: "large" | "xlarge";
}

Chip

Compact information display with icon and remove action.

/**
 * Compact information chip
 */
import Chip from "primevue/chip";

interface ChipProps extends BaseComponentProps {
  label?: string;
  icon?: string;
  image?: string;
  removable?: boolean;
  removeIcon?: string;
}

Tag

Label/tag display with severity levels and customization options.

/**
 * Label/tag component
 */
import Tag from "primevue/tag";

interface TagProps extends BaseComponentProps {
  value?: any;
  severity?: "secondary" | "info" | "success" | "warning" | "danger" | "contrast";
  rounded?: boolean;
  icon?: string;
}

Input Enhancement Components

FloatLabel

Floating input labels that animate on focus.

/**
 * Floating label wrapper
 */
import FloatLabel from "primevue/floatlabel";

interface FloatLabelProps extends BaseComponentProps {
  // Wrapper component for input controls with floating labels
}

IconField

Input field wrapper with integrated icon positioning.

/**
 * Input field with icon integration
 */
import IconField from "primevue/iconfield";

interface IconFieldProps extends BaseComponentProps {
  iconPosition?: "left" | "right";
}

InputIcon

Icon component specifically designed for input fields.

/**
 * Icon for input fields
 */
import InputIcon from "primevue/inputicon";

interface InputIconProps extends BaseComponentProps {
  class?: string;
}

Usage Example:

<template>
  <!-- Icon field with input -->
  <IconField iconPosition="left">
    <InputIcon class="pi pi-search" />
    <InputText v-model="searchValue" placeholder="Search..." />
  </IconField>
  
  <!-- Floating label -->
  <FloatLabel>
    <InputText id="username" v-model="username" />
    <label for="username">Username</label>
  </FloatLabel>
</template>

Special Utility Components

Portal

DOM portal for rendering content outside the component tree.

/**
 * DOM portal component
 */
import Portal from "primevue/portal";

interface PortalProps extends BaseComponentProps {
  appendTo?: string;
  disabled?: boolean;
}

ScrollTop

Scroll to top button that appears based on scroll position.

/**
 * Scroll to top button
 */
import ScrollTop from "primevue/scrolltop";

interface ScrollTopProps extends BaseComponentProps {
  target?: "window" | "parent";
  threshold?: number;
  icon?: string;
  behavior?: "auto" | "smooth";
}

DeferredContent

Lazy-loaded content that renders when visible in viewport.

/**
 * Lazy content loading component
 */
import DeferredContent from "primevue/deferredcontent";

interface DeferredContentProps extends BaseComponentProps {
  // Content rendered when component becomes visible
}

Terminal

Command-line interface component for interactive terminal applications.

/**
 * Terminal interface component
 */
import Terminal from "primevue/terminal";

interface TerminalProps extends BaseComponentProps {
  welcomeMessage?: string;
  prompt?: string;
}

Usage Example:

<template>
  <Terminal 
    welcomeMessage="Welcome to PrimeVue Terminal"
    prompt="primevue $"
  />
</template>

<script setup>
import { onMounted } from 'vue';
import Terminal from 'primevue/terminal';
import TerminalService from 'primevue/terminalservice';

onMounted(() => {
  TerminalService.on('command', (command) => {
    let response;
    if (command === 'date')
      response = new Date().toDateString();
    else if (command === 'greet')
      response = 'Hello World!';
    else if (command.startsWith('echo '))
      response = command.slice(5);
    else
      response = 'Unknown command: ' + command;
    
    TerminalService.emit('response', response);
  });
});
</script>

Inplace

Inline editing component that switches between display and edit modes.

/**
 * Inline editing component
 */
import Inplace from "primevue/inplace";

interface InplaceProps extends BaseComponentProps {
  active?: boolean;
  closable?: boolean;
  disabled?: boolean;
  closeIcon?: string;
  displayProps?: object;
  closeButtonProps?: object;
}

Usage Example:

<template>
  <Inplace>
    <template #display>
      {{ text || 'Click to Edit' }}
    </template>
    <template #content>
      <InputText v-model="text" @keyup.enter="$refs.inplace.deactivate()" />
    </template>
  </Inplace>
</template>

<script setup>
import { ref } from 'vue';
import Inplace from 'primevue/inplace';
import InputText from 'primevue/inputtext';

const text = ref('Editable Text');
</script>

Types

// Toast message interface
interface ToastMessage {
  severity?: "success" | "info" | "warn" | "error" | "secondary" | "contrast";
  summary?: string;
  detail?: string;
  life?: number;
  closable?: boolean;
  group?: string;
  styleClass?: string;
  contentStyleClass?: string;
}

// Chip remove event
interface ChipRemoveEvent {
  originalEvent: Event;
  value: any;
}

// Message severity type
type MessageSeverity = "success" | "info" | "warn" | "error" | "secondary" | "contrast";

Install with Tessl CLI