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

UI Components

Name: tessl/npm-vuetify
Author: tessl

Comprehensive collection of Material Design components for building modern user interfaces with Vue.js.

Capabilities

Core UI Components

Essential user interface components for basic application needs.

/** Application root component providing Material Design styling context */
const VApp: Component;

/** Material Design button component with multiple variants and states */
const VBtn: Component;

/** Material Design card container for content grouping */
const VCard: Component;

/** Card sub-components for structured content */
const VCardActions: Component;
const VCardItem: Component;
const VCardSubtitle: Component;
const VCardText: Component;
const VCardTitle: Component;

/** Alert component for displaying important messages */
const VAlert: Component;
const VAlertTitle: Component;

/** Avatar component for user profile images */
const VAvatar: Component;

/** Badge component for notification indicators */
const VBadge: Component;

/** Banner component for prominent notifications */
const VBanner: Component;

/** Chip component for tags and filters */
const VChip: Component;
const VChipGroup: Component;

/** Dialog modal component */
const VDialog: Component;

/** Divider line component */
const VDivider: Component;

/** Icon display component */
const VIcon: Component;

/** Image component with lazy loading and aspect ratio support */
const VImg: Component;

Usage Examples:

// Basic button usage
<template>
  <v-btn color="primary" size="large" @click="handleClick">
    Click Me
  </v-btn>
</template>

// Card with structured content
<template>
  <v-card>
    <v-card-title>Card Title</v-card-title>
    <v-card-subtitle>Card Subtitle</v-card-subtitle>
    <v-card-text>
      Card content goes here
    </v-card-text>
    <v-card-actions>
      <v-btn>Action</v-btn>
    </v-card-actions>
  </v-card>
</template>

// Alert with title
<template>
  <v-alert type="success" variant="tonal">
    <v-alert-title>Success!</v-alert-title>
    Operation completed successfully.
  </v-alert>
</template>

Layout Components

Components for creating responsive layouts and organizing content.

/** Grid container component for responsive layouts */
const VContainer: Component;

/** Grid row component */
const VRow: Component;

/** Grid column component with responsive breakpoint support */
const VCol: Component;

/** Flexible spacer component */
const VSpacer: Component;

/** Layout wrapper component */
const VLayout: Component;

/** Main content area component */
const VMain: Component;

/** Application footer component */
const VFooter: Component;

/** Base sheet/surface component for elevation and styling */
const VSheet: Component;

/** Responsive wrapper with aspect ratio support */
const VResponsive: Component;

Usage Examples:

// Responsive grid layout
<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="6">
        Column 1
      </v-col>
      <v-col cols="12" md="6">
        Column 2
      </v-col>
    </v-row>
  </v-container>
</template>

// Basic app layout
<template>
  <v-app>
    <v-layout>
      <v-main>
        <v-container>
          App content
        </v-container>
      </v-main>
    </v-layout>
  </v-app>
</template>

Input Components

Form input components with Material Design styling and validation.

/** Base input component */
const VInput: Component;

/** Single-line text input field */
const VTextField: Component;

/** Multi-line text input area */
const VTextarea: Component;

/** Select dropdown component */
const VSelect: Component;

/** Combobox with free text input */
const VCombobox: Component;

/** Autocomplete input with filtering */
const VAutocomplete: Component;

/** Checkbox input component */
const VCheckbox: Component;

/** Radio button input */
const VRadio: Component;

/** Radio button group */
const VRadioGroup: Component;

/** Toggle switch component */
const VSwitch: Component;

/** Slider input component */
const VSlider: Component;

/** Range slider with dual handles */
const VRangeSlider: Component;

/** File upload input */
const VFileInput: Component;

/** Numeric input with controls */
const VNumberInput: Component;

/** One-time password input */
const VOtpInput: Component;

/** Base form field wrapper */
const VField: Component;

/** Form label component */
const VLabel: Component;

/** Selection control base component */
const VSelectionControl: Component;

/** Selection control group */
const VSelectionControlGroup: Component;

Usage Examples:

// Text field with validation
<template>
  <v-text-field
    v-model="email"
    label="Email"
    type="email"
    :rules="emailRules"
    required
  />
</template>

// Select dropdown
<template>
  <v-select
    v-model="selectedItem"
    :items="items"
    label="Choose an option"
    item-title="name"
    item-value="id"
  />
</template>

// Checkbox group
<template>
  <div>
    <v-checkbox
      v-model="selected"
      label="Option 1"
      value="option1"
    />
    <v-checkbox
      v-model="selected"
      label="Option 2"
      value="option2"
    />
  </div>
</template>

Display Components

Components for organizing and displaying content in various formats.

/** Expandable content panel */
const VExpansionPanel: Component;

/** List display component */
const VList: Component;

/** Empty state illustration component */
const VEmptyState: Component;

/** Code display component with syntax highlighting */
const VCode: Component;

/** Counter display component */
const VCounter: Component;

/** Keyboard shortcut display */
const VKbd: Component;

/** Message display component */
const VMessages: Component;

/** Sparkline chart visualization */
const VSparkline: Component;

/** Rating display and input component */
const VRating: Component;

/** Timeline display component */
const VTimeline: Component;

/** Item group container */
const VItemGroup: Component;

/** Slide group container */
const VSlideGroup: Component;

/** Button group container */
const VBtnGroup: Component;

/** Button toggle group */
const VBtnToggle: Component;

Usage Examples:

// List with items
<template>
  <v-list>
    <v-list-item
      v-for="item in items"
      :key="item.id"
      :title="item.title"
      :subtitle="item.subtitle"
    />
  </v-list>
</template>

// Expansion panels
<template>
  <v-expansion-panels>
    <v-expansion-panel title="Panel 1">
      Panel 1 content
    </v-expansion-panel>
    <v-expansion-panel title="Panel 2">
      Panel 2 content
    </v-expansion-panel>
  </v-expansion-panels>
</template>

// Rating component
<template>
  <v-rating
    v-model="rating"
    :length="5"
    color="yellow-darken-3"
  />
</template>

Overlay Components

Components for creating overlays, modals, and floating content.

/** Base overlay component for backdrops and positioning */
const VOverlay: Component;

/** Tooltip overlay component */
const VTooltip: Component;

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

/** Bottom sheet modal component */
const VBottomSheet: Component;

/** Hover state detection wrapper */
const VHover: Component;

/** Lazy loading wrapper */
const VLazy: Component;

/** No server-side rendering wrapper */
const VNoSsr: Component;

Usage Examples:

// Tooltip
<template>
  <v-tooltip text="Tooltip text">
    <template #activator="{ props }">
      <v-btn v-bind="props">
        Hover me
      </v-btn>
    </template>
  </v-tooltip>
</template>

// Menu
<template>
  <v-menu>
    <template #activator="{ props }">
      <v-btn v-bind="props">
        Open Menu
      </v-btn>
    </template>
    <v-list>
      <v-list-item title="Item 1" />
      <v-list-item title="Item 2" />
    </v-list>
  </v-menu>
</template>

Specialized Components

Components for specific use cases and advanced functionality.

/** Color picker with palette */
const VColorPicker: Component;

/** Date selection picker */
const VDatePicker: Component;

/** Time selection picker */
const VTimePicker: Component;

/** Image/content carousel */
const VCarousel: Component;

/** Parallax scrolling effect */
const VParallax: Component;

/** Floating action button */
const VFab: Component;

/** Speed dial floating menu */
const VSpeedDial: Component;

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

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

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

/** Inline edit confirmation */
const VConfirmEdit: Component;

/** Validation wrapper component */
const VValidation: Component;

/** Component defaults provider */
const VDefaultsProvider: Component;

/** Theme context provider */
const VThemeProvider: Component;

/** Locale context provider */
const VLocaleProvider: Component;

Usage Examples:

// Date picker
<template>
  <v-date-picker
    v-model="selectedDate"
    :allowed-dates="allowedDates"
  />
</template>

// Stepper
<template>
  <v-stepper v-model="step">
    <v-stepper-header>
      <v-stepper-item :complete="step > 1" step="1" title="Step 1" />
      <v-divider />
      <v-stepper-item :complete="step > 2" step="2" title="Step 2" />
    </v-stepper-header>
    
    <v-stepper-window v-model="step">
      <v-stepper-window-item :value="1">
        Step 1 content
      </v-stepper-window-item>
      <v-stepper-window-item :value="2">
        Step 2 content
      </v-stepper-window-item>
    </v-stepper-window>
  </v-stepper>
</template>

// Carousel
<template>
  <v-carousel>
    <v-carousel-item
      v-for="item in items"
      :key="item.id"
      :src="item.image"
    />
  </v-carousel>
</template>

Types

// Base component type
interface Component {
  __vccOpts?: any;
  [key: string]: any;
}

// Common component props
interface BaseProps {
  class?: string;
  style?: string | Record<string, any>;
  id?: string;
}

// Color prop type
type Color = string | 'primary' | 'secondary' | 'accent' | 'error' | 'info' | 'success' | 'warning';

// Size prop type
type Size = 'x-small' | 'small' | 'default' | 'large' | 'x-large';

// Variant prop type  
type Variant = 'elevated' | 'flat' | 'tonal' | 'outlined' | 'text' | 'plain';

// Density prop type
type Density = 'default' | 'comfortable' | 'compact';

// Position prop type
type Position = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky';

Install with Tessl CLI