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

Navigation Components

Name: tessl/npm-primevue
Author: tessl

Navigation elements including menus, breadcrumbs, steps, and dock-style navigation with hierarchical support and customizable styling.

Capabilities

Menu Components

Menubar

Horizontal menu bar with dropdown submenus and keyboard navigation.

/**
 * Horizontal menu bar component
 */
import Menubar from "primevue/menubar";

interface MenubarProps extends BaseComponentProps {
  model?: MenuItem[];
  exact?: boolean;
}

ContextMenu

Right-click context menu with positioning and nested items.

/**
 * Right-click context menu
 */
import ContextMenu from "primevue/contextmenu";

interface ContextMenuProps extends BaseComponentProps {
  model?: MenuItem[];
  appendTo?: string;
  baseZIndex?: number;
  autoZIndex?: boolean;
  exact?: boolean;
  tabindex?: number;
}

Process Navigation

Steps

Step indicator component for process navigation with linear progression.

/**
 * Step indicator for process navigation
 */
import Steps from "primevue/steps";

interface StepsProps extends BaseComponentProps {
  model?: MenuItem[];
  activeIndex?: number;
  readonly?: boolean;
  exact?: boolean;
}

Breadcrumb

Navigation breadcrumb trail with separators and home icon.

/**
 * Breadcrumb navigation trail
 */
import Breadcrumb from "primevue/breadcrumb";

interface BreadcrumbProps extends BaseComponentProps {
  model?: MenuItem[];
  home?: MenuItem;
  exact?: boolean;
}

Usage Example:

<template>
  <Breadcrumb :home="home" :model="items" />
</template>

<script setup>
import { ref } from 'vue';
import Breadcrumb from 'primevue/breadcrumb';

const home = ref({
  icon: 'pi pi-home',
  route: '/'
});

const items = ref([
  { label: 'Computer' },
  { label: 'Notebook' },
  { label: 'Accessories' },
  { label: 'Backpacks' },
  { label: 'Item' }
]);
</script>

PanelMenu

Accordion-style menu component with collapsible navigation sections.

/**
 * Accordion-style panel menu
 */
import PanelMenu from "primevue/panelmenu";

interface PanelMenuProps extends BaseComponentProps {
  model?: MenuItem[];
  expandedKeys?: object;
  exact?: boolean;
}

Usage Example:

<template>
  <PanelMenu :model="menuItems" />
</template>

<script setup>
import { ref } from 'vue';
import PanelMenu from 'primevue/panelmenu';

const menuItems = ref([
  {
    label: 'Documents',
    icon: 'pi pi-fw pi-file',
    items: [
      { label: 'New', icon: 'pi pi-fw pi-plus', url: '#/new' },
      { label: 'Search', icon: 'pi pi-fw pi-search', url: '#/search' }
    ]
  },
  {
    label: 'Profile',
    icon: 'pi pi-fw pi-user',
    items: [
      { label: 'Settings', icon: 'pi pi-fw pi-cog', url: '#/settings' },
      { label: 'Logout', icon: 'pi pi-fw pi-sign-out', url: '#/logout' }
    ]
  }
]);
</script>

TieredMenu

Multi-level hierarchical menu with cascading submenus.

/**
 * Multi-level tiered menu component
 */
import TieredMenu from "primevue/tieredmenu";

interface TieredMenuProps extends BaseComponentProps {
  model?: MenuItem[];
  popup?: boolean;
  appendTo?: string;
  baseZIndex?: number;
  autoZIndex?: boolean;
  exact?: boolean;
  disabled?: boolean;
  tabindex?: number;
}

Usage Example:

<template>
  <Button type="button" label="Show Menu" @click="toggle" />
  <TieredMenu ref="menu" :model="items" :popup="true" />
</template>

<script setup>
import { ref } from 'vue';
import TieredMenu from 'primevue/tieredmenu';
import Button from 'primevue/button';

const menu = ref();

const items = ref([
  {
    label: 'File',
    icon: 'pi pi-fw pi-file',
    items: [
      {
        label: 'New',
        icon: 'pi pi-fw pi-plus',
        items: [
          { label: 'Document', icon: 'pi pi-fw pi-file' },
          { label: 'Image', icon: 'pi pi-fw pi-image' }
        ]
      },
      { label: 'Open', icon: 'pi pi-fw pi-external-link' }
    ]
  },
  {
    label: 'Edit',
    icon: 'pi pi-fw pi-pencil',
    items: [
      { label: 'Copy', icon: 'pi pi-fw pi-copy' },
      { label: 'Paste', icon: 'pi pi-fw pi-clipboard' }
    ]
  }
]);

const toggle = (event) => {
  menu.value.toggle(event);
};
</script>

Types

// Menu item click event
interface MenuItemCommandEvent {
  originalEvent: Event;
  item: MenuItem;
}

Install with Tessl CLI

npx tessl i tessl/npm-primevue

docs

button-components.md

configuration-theming.md

data-display-components.md

overlay-components.md

services-composables.md

utility-components.md

tile.json

tessl/npm-primevue