tessl/npm-vuetify

Vue Material Component Framework implementing Google's Material Design specification with comprehensive UI components, theming system, and accessibility features.

—

Pending

Overview

Eval results

Files

Navigation Components

Name: tessl/npm-vuetify
Author: tessl

Components for creating navigation structures, user flows, and application routing interfaces.

Capabilities

App Navigation

Primary application navigation components for headers, sidebars, and main navigation structures.

/** Application top bar component with Material Design styling */
const VAppBar: Component;

/** Side navigation drawer with sliding functionality */
const VNavigationDrawer: Component;

/** Bottom navigation bar for mobile-first navigation */
const VBottomNavigation: Component;

/** Application toolbar component */
const VToolbar: Component;

/** System status bar component */
const VSystemBar: Component;

Usage Examples:

// App bar with navigation
<template>
  <v-app-bar>
    <v-app-bar-nav-icon @click="drawer = !drawer" />
    <v-toolbar-title>My App</v-toolbar-title>
    <v-spacer />
    <v-btn icon="mdi-magnify" />
    <v-btn icon="mdi-heart" />
    <v-btn icon="mdi-dots-vertical" />
  </v-app-bar>
</template>

// Navigation drawer
<template>
  <v-navigation-drawer v-model="drawer" :rail="rail">
    <v-list>
      <v-list-item
        v-for="item in items"
        :key="item.title"
        :prepend-icon="item.icon"
        :title="item.title"
        :to="item.route"
      />
    </v-list>
  </v-navigation-drawer>
</template>

// Bottom navigation
<template>
  <v-bottom-navigation v-model="activeTab">
    <v-btn value="home">
      <v-icon>mdi-home</v-icon>
      Home
    </v-btn>
    <v-btn value="search">
      <v-icon>mdi-magnify</v-icon>
      Search
    </v-btn>
    <v-btn value="profile">
      <v-icon>mdi-account</v-icon>
      Profile
    </v-btn>
  </v-bottom-navigation>
</template>

Tab Navigation

Tab-based navigation components for organizing content into distinct sections.

/** Tab navigation component with Material Design styling */
const VTabs: Component;

/** Individual tab item component */
const VTab: Component;

/** Tab content window container */
const VWindow: Component;

/** Individual tab content panel */
const VWindowItem: Component;

Usage Examples:

// Tabs with content windows
<template>
  <div>
    <v-tabs v-model="activeTab" bg-color="primary">
      <v-tab value="tab1">Tab 1</v-tab>
      <v-tab value="tab2">Tab 2</v-tab>
      <v-tab value="tab3">Tab 3</v-tab>
    </v-tabs>
    
    <v-window v-model="activeTab">
      <v-window-item value="tab1">
        <v-container>Tab 1 content</v-container>
      </v-window-item>
      <v-window-item value="tab2">
        <v-container>Tab 2 content</v-container>
      </v-window-item>
      <v-window-item value="tab3">
        <v-container>Tab 3 content</v-container>
      </v-window-item>
    </v-window>
  </div>
</template>

// Vertical tabs
<template>
  <v-tabs direction="vertical" v-model="activeTab">
    <v-tab value="overview">Overview</v-tab>
    <v-tab value="details">Details</v-tab>
    <v-tab value="settings">Settings</v-tab>
  </v-tabs>
</template>

Breadcrumb Navigation

Hierarchical navigation showing the user's location within the application structure.

/** Breadcrumb navigation component showing hierarchical path */
const VBreadcrumbs: Component;

/** Individual breadcrumb item component */
const VBreadcrumbsItem: Component;

/** Breadcrumb divider component */
const VBreadcrumbsDivider: Component;

Usage Examples:

// Basic breadcrumbs
<template>
  <v-breadcrumbs :items="breadcrumbItems">
    <template #divider>
      <v-icon>mdi-chevron-right</v-icon>
    </template>
  </v-breadcrumbs>
</template>

<script setup>
const breadcrumbItems = [
  { title: 'Home', to: '/' },
  { title: 'Products', to: '/products' },
  { title: 'Electronics', to: '/products/electronics' },
  { title: 'Laptops', disabled: true },
];
</script>

// Custom breadcrumb styling
<template>
  <v-breadcrumbs>
    <v-breadcrumbs-item>
      <v-icon>mdi-home</v-icon>
    </v-breadcrumbs-item>
    <v-breadcrumbs-divider>/</v-breadcrumbs-divider>
    <v-breadcrumbs-item>Category</v-breadcrumbs-item>
    <v-breadcrumbs-divider>/</v-breadcrumbs-divider>
    <v-breadcrumbs-item>Current Page</v-breadcrumbs-item>
  </v-breadcrumbs>
</template>

Menu Navigation

Context menus and dropdown navigation components.

/** Context/dropdown menu component */
const VMenu: Component;

/** Menu list container */
const VList: Component;

/** Individual menu list item */
const VListItem: Component;

/** List item group for selection */
const VListGroup: Component;

/** List item header/subheader */
const VListSubheader: Component;

Usage Examples:

// Dropdown menu
<template>
  <v-menu>
    <template #activator="{ props }">
      <v-btn v-bind="props">
        Menu
        <v-icon end>mdi-menu-down</v-icon>
      </v-btn>
    </template>
    
    <v-list>
      <v-list-item
        v-for="item in menuItems"
        :key="item.title"
        :prepend-icon="item.icon"
        :title="item.title"
        @click="item.action"
      />
    </v-list>
  </v-menu>
</template>

// Context menu
<template>
  <div>
    <v-menu
      v-model="contextMenu"
      :position-x="contextMenuX"
      :position-y="contextMenuY"
      absolute
    >
      <v-list>
        <v-list-item @click="copy">
          <v-list-item-title>Copy</v-list-item-title>
        </v-list-item>
        <v-list-item @click="paste">
          <v-list-item-title>Paste</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
    
    <div @contextmenu="showContextMenu">
      Right-click me
    </div>
  </div>
</template>

Stepper Navigation

Step-by-step navigation for multi-step processes and wizards.

/** Step-by-step wizard component */
const VStepper: Component;

/** Stepper header containing step indicators */
const VStepperHeader: Component;

/** Individual step indicator */
const VStepperItem: Component;

/** Stepper content window container */
const VStepperWindow: Component;

/** Individual step content panel */
const VStepperWindowItem: Component;

/** Stepper actions container */
const VStepperActions: Component;

Usage Examples:

// Linear stepper
<template>
  <v-stepper v-model="currentStep">
    <v-stepper-header>
      <v-stepper-item
        :complete="currentStep > 1"
        step="1"
        title="Select campaign settings"
      />
      <v-divider />
      <v-stepper-item
        :complete="currentStep > 2"
        step="2"
        title="Create an ad group"
      />
      <v-divider />
      <v-stepper-item
        step="3"
        title="Create an ad"
      />
    </v-stepper-header>

    <v-stepper-window v-model="currentStep">
      <v-stepper-window-item :value="1">
        <v-card>
          <v-card-text>Step 1 content</v-card-text>
        </v-card>
      </v-stepper-window-item>
      <v-stepper-window-item :value="2">
        <v-card>
          <v-card-text>Step 2 content</v-card-text>
        </v-card>
      </v-stepper-window-item>
      <v-stepper-window-item :value="3">
        <v-card>
          <v-card-text>Step 3 content</v-card-text>
        </v-card>
      </v-stepper-window-item>
    </v-stepper-window>

    <v-stepper-actions
      @click:next="nextStep"
      @click:prev="prevStep"
    />
  </v-stepper>
</template>

// Non-linear stepper
<template>
  <v-stepper v-model="currentStep" non-linear>
    <v-stepper-header>
      <v-stepper-item
        v-for="step in steps"
        :key="step.value"
        :complete="step.complete"
        :step="step.value"
        :title="step.title"
        :editable="step.editable"
      />
    </v-stepper-header>
  </v-stepper>
</template>

Pagination Navigation

Page-based navigation for large data sets and content collections.

/** Pagination navigation component */
const VPagination: Component;

Usage Examples:

// Basic pagination
<template>
  <v-pagination
    v-model="currentPage"
    :length="totalPages"
    @update:model-value="loadPage"
  />
</template>

// Pagination with custom styling
<template>
  <v-pagination
    v-model="page"
    :length="pageCount"
    :total-visible="7"
    color="primary"
    variant="elevated"
    density="comfortable"
  />
</template>

// Pagination with previous/next buttons
<template>
  <v-pagination
    v-model="page"
    :length="pages"
    prev-icon="mdi-menu-left"
    next-icon="mdi-menu-right"
  />
</template>

Types

// Navigation-related types
interface NavigationItem {
  title: string;
  icon?: string;
  to?: string;
  href?: string;
  target?: string;
  exact?: boolean;
  disabled?: boolean;
  children?: NavigationItem[];
}

interface BreadcrumbItem {
  title: string;
  to?: string;
  href?: string;
  disabled?: boolean;
  exact?: boolean;
}

interface StepperStep {
  value: number;
  title: string;
  subtitle?: string;
  complete?: boolean;
  editable?: boolean;
  error?: boolean;
  icon?: string;
}

// Tab-related types
interface TabItem {
  title: string;
  value: any;
  disabled?: boolean;
  href?: string;
  to?: string;
  icon?: string;
  prependIcon?: string;
  appendIcon?: string;
}

// Menu-related types
interface MenuItem {
  title: string;
  value?: any;
  props?: Record<string, any>;
  children?: MenuItem[];
}

Install with Tessl CLI