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

Directives

Name: tessl/npm-primevue
Author: tessl

Vue directives for adding interactive behaviors like ripple effects, tooltips, focus management, and keyboard filtering to enhance user experience and accessibility.

Capabilities

Ripple

Adds Material Design ripple effect to elements on user interaction.

/**
 * Material Design ripple effect directive
 */
import Ripple from "primevue/ripple";

// Registration
app.directive('ripple', Ripple);

// Usage in template
// <Button v-ripple label="Click Me" />

Tooltip

Displays contextual tooltips on hover, focus, or click events.

/**
 * Tooltip directive for contextual information
 */
import Tooltip from "primevue/tooltip";

interface TooltipOptions {
  value?: string;
  fitContent?: boolean;
  hideOnEscape?: boolean;
  class?: string;
  style?: any;
  showDelay?: number;
  hideDelay?: number;
  life?: number;
  showOnDisabled?: boolean;
  appendTo?: string;
  escape?: boolean;
  autoZIndex?: boolean;
  baseZIndex?: number;
  id?: string;
}

// Registration
app.directive('tooltip', Tooltip);

// Usage in template
// <Button v-tooltip="'Save document'" icon="pi pi-save" />
// <Button v-tooltip.top="'Top tooltip'" label="Top" />
// <Button v-tooltip="{ value: 'Custom tooltip', showDelay: 1000 }" label="Custom" />

Usage Example:

<template>
  <!-- Simple tooltip -->
  <Button v-tooltip="'Click to save'" icon="pi pi-save" />
  
  <!-- Positioned tooltip -->
  <Button v-tooltip.bottom="'Bottom tooltip'" label="Hover me" />
  
  <!-- Advanced tooltip -->
  <Button 
    v-tooltip="{ 
      value: 'Custom styled tooltip', 
      class: 'custom-tooltip',
      showDelay: 500,
      hideDelay: 300
    }" 
    label="Advanced" 
  />
</template>

BadgeDirective

Adds badge overlays to any element for notifications or status indicators.

/**
 * Badge overlay directive
 */
import BadgeDirective from "primevue/badgedirective";

// Registration
app.directive('badge', BadgeDirective);

// Usage in template
// <Button v-badge="2" icon="pi pi-bell" />
// <Button v-badge.danger="'5+'" icon="pi pi-envelope" />

FocusTrap

Manages focus within a container for accessibility and modal dialogs.

/**
 * Focus trap directive for accessibility
 */
import FocusTrap from "primevue/focustrap";

interface FocusTrapOptions {
  disabled?: boolean;
  onMountAutoFocus?: boolean;
  onUnmountAutoFocus?: boolean;
}

// Registration
app.directive('focustrap', FocusTrap);

// Usage in template
// <div v-focustrap class="modal-content">
//   <input />
//   <button>Close</button>
// </div>

KeyFilter

Filters keyboard input based on specified patterns for data validation.

/**
 * Keyboard input filtering directive
 */
import KeyFilter from "primevue/keyfilter";

// Registration
app.directive('keyfilter', KeyFilter);

// Usage in template
// <InputText v-keyfilter="/[\d]/" placeholder="Numbers only" />
// <InputText v-keyfilter="'alpha'" placeholder="Alphabetic characters only" />
// <InputText v-keyfilter="'email'" placeholder="Email format" />

Built-in Patterns:

'alpha' - Alphabetic characters
'alphanum' - Alphanumeric characters
'int' - Integers
'num' - Numbers with decimal
'money' - Currency format
'email' - Email format
'hex' - Hexadecimal
Custom RegExp patterns

StyleClass

Manages CSS class manipulation based on element interactions and states.

/**
 * Dynamic style class management directive
 */
import StyleClass from "primevue/styleclass";

interface StyleClassOptions {
  selector?: string;
  enterClass?: string;
  enterActiveClass?: string;
  enterToClass?: string;
  leaveClass?: string;
  leaveActiveClass?: string;
  leaveToClass?: string;
  hideOnOutsideClick?: boolean;
  toggleClass?: string;
}

// Registration
app.directive('styleclass', StyleClass);

// Usage in template
// <Button v-styleclass="{ 
//   selector: '.panel',
//   toggleClass: 'panel-visible'
// }" label="Toggle Panel" />

AnimateOnScroll

Applies CSS animations when elements enter the viewport during scrolling.

/**
 * Scroll-triggered animation directive
 */
import AnimateOnScroll from "primevue/animateonscroll";

interface AnimateOnScrollOptions {
  root?: Element;
  rootMargin?: string;
  threshold?: number | number[];
  enterClass?: string;
  leaveClass?: string;
}

// Registration
app.directive('animateonscroll', AnimateOnScroll);

// Usage in template
// <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }">
//   Content to animate
// </div>

Usage Example:

<template>
  <div class="content">
    <div 
      v-animateonscroll="{ 
        enterClass: 'animate__animated animate__fadeInUp',
        threshold: 0.5 
      }"
      class="card"
    >
      <h3>Animated Card</h3>
      <p>This card animates when scrolled into view</p>
    </div>
  </div>
</template>

<style>
.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animate__fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
</style>

Directive Registration

Global Registration:

import { createApp } from 'vue';
import Ripple from 'primevue/ripple';
import Tooltip from 'primevue/tooltip';
import BadgeDirective from 'primevue/badgedirective';
import FocusTrap from 'primevue/focustrap';
import StyleClass from 'primevue/styleclass';
import AnimateOnScroll from 'primevue/animateonscroll';

const app = createApp(App);

app.directive('ripple', Ripple);
app.directive('tooltip', Tooltip);
app.directive('badge', BadgeDirective);
app.directive('focustrap', FocusTrap);
app.directive('styleclass', StyleClass);
app.directive('animateonscroll', AnimateOnScroll);

Local Registration:

<script setup>
import Ripple from 'primevue/ripple';
import Tooltip from 'primevue/tooltip';

const vRipple = Ripple;
const vTooltip = Tooltip;
</script>

<template>
  <Button v-ripple v-tooltip="'Click me'" label="Local Directives" />
</template>

Install with Tessl CLI