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

Overlay Components

Name: tessl/npm-primevue
Author: tessl

Modal dialogs, drawers, popovers, and overlay panels for displaying contextual content and collecting user input with flexible positioning and animation options.

Capabilities

Dialog Components

Dialog

Modal dialog container with header, content, footer, and extensive customization options.

/**
 * Modal dialog component
 */
import Dialog from "primevue/dialog";

interface DialogProps extends BaseComponentProps {
  header?: string;
  footer?: string;
  visible?: boolean;
  modal?: boolean;
  contentStyle?: any;
  contentClass?: string;
  rtl?: boolean;
  closable?: boolean;
  dismissableMask?: boolean;
  closeOnEscape?: boolean;
  showHeader?: boolean;
  baseZIndex?: number;
  autoZIndex?: boolean;
  position?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
  maximizable?: boolean;
  breakpoints?: object;
  draggable?: boolean;
  resizable?: boolean;
  minX?: number;
  minY?: number;
  keepInViewport?: boolean;
  appendTo?: string;
  style?: any;
  class?: string;
  blockScroll?: boolean;
}

Usage Example:

<template>
  <Dialog v-model:visible="visible" modal header="Header" :style="{width: '50vw'}">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <template #footer>
      <Button label="No" icon="pi pi-times" @click="visible = false" text />
      <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
    </template>
  </Dialog>
</template>

ConfirmDialog

Modal confirmation dialog with accept/reject actions.

/**
 * Modal confirmation dialog
 */
import ConfirmDialog from "primevue/confirmdialog";

interface ConfirmDialogProps extends BaseComponentProps {
  group?: string;
  breakpoints?: object;
}

DynamicDialog

Programmatically created dialog for dynamic content rendering.

/**
 * Dynamic dialog for programmatic content
 */
import DynamicDialog from "primevue/dynamicdialog";

interface DynamicDialogProps extends BaseComponentProps {
  // Configured through DialogService
}

Side Panel Components

Drawer

Modern slide-out side panel with multiple positions and sizes.

/**
 * Modern slide-out side panel
 */
import Drawer from "primevue/drawer";

interface DrawerProps extends BaseComponentProps {
  visible?: boolean;
  position?: "left" | "right" | "top" | "bottom";
  header?: string;
  baseZIndex?: number;
  autoZIndex?: boolean;
  dismissable?: boolean;
  showCloseIcon?: boolean;
  closeIcon?: string;
  modal?: boolean;
  blockScroll?: boolean;
}

Popup Components

Popover

Contextual popup container with arrow pointer and flexible positioning.

/**
 * Contextual popup with positioning
 */
import Popover from "primevue/popover";

interface PopoverProps extends BaseComponentProps {
  dismissable?: boolean;
  appendTo?: string;
  baseZIndex?: number;
  autoZIndex?: boolean;
}

OverlayPanel

Positioned overlay container with arrow pointer for contextual content.

/**
 * Positioned overlay panel
 */
import OverlayPanel from "primevue/overlaypanel";

interface OverlayPanelProps extends BaseComponentProps {
  dismissable?: boolean;
  showCloseIcon?: boolean;
  appendTo?: string;
  baseZIndex?: number;
  autoZIndex?: boolean;
  breakpoints?: object;
  closeIcon?: string;
  closeOnEscape?: boolean;
}

Types

// Dialog events
interface DialogBeforeShowEvent {
  originalEvent: Event;
}

interface DialogShowEvent {
  originalEvent: Event;
}

interface DialogBeforeHideEvent {
  originalEvent: Event;
}

interface DialogHideEvent {
  originalEvent: Event;
}

interface DialogMaximizeEvent {
  originalEvent: Event;
  maximized: boolean;
}

Install with Tessl CLI