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

Lab Components

Name: tessl/npm-vuetify
Author: tessl

Experimental components for testing new features and functionality. These components are in active development and may have breaking changes in future releases.

Capabilities

Calendar Components

Calendar and date-related experimental components.

/** Calendar view component with month, week, and day views */
const VCalendar: Component;

/** Calendar day cell component */
const VCalendarDay: Component;

/** Calendar header component with navigation */
const VCalendarHeader: Component;

/** Calendar interval view component */
const VCalendarInterval: Component;

/** Calendar event display component */
const VCalendarIntervalEvent: Component;

/** Calendar month day cell component */
const VCalendarMonthDay: Component;

Usage Examples:

// Basic calendar
<template>
  <v-calendar
    v-model="selectedDate"
    :events="events"
    @click:event="handleEventClick"
  />
</template>

// Calendar with custom events
<template>
  <v-calendar
    v-model="date"
    :events="calendarEvents"
    color="primary"
  >
    <template #event="{ event }">
      <div class="custom-event">
        {{ event.name }}
      </div>
    </template>
  </v-calendar>
</template>

Input Components

Experimental input components with enhanced functionality.

/** Color input field component */
const VColorInput: Component;

/** Date input field component */
const VDateInput: Component;

/** Advanced file upload component */
const VFileUpload: Component;

/** Masked input field component */
const VMaskInput: Component;

Usage Examples:

// Color input
<template>
  <v-color-input
    v-model="selectedColor"
    label="Choose color"
    show-swatches
  />
</template>

// Date input
<template>
  <v-date-input
    v-model="selectedDate"
    label="Select date"
    :min="minDate"
    :max="maxDate"
  />
</template>

// File upload
<template>
  <v-file-upload
    v-model="files"
    multiple
    accept="image/*"
    :max-size="5000000"
    @upload="handleUpload"
  />
</template>

// Masked input
<template>
  <v-mask-input
    v-model="phoneNumber"
    mask="(###) ###-####"
    label="Phone number"
  />
</template>

Interaction Components

Components for advanced user interactions and functionality.

/** Hotkey management component */
const VHotkey: Component;

/** Icon-only button component */
const VIconBtn: Component;

/** Pull-to-refresh functionality component */
const VPullToRefresh: Component;

Usage Examples:

// Hotkey component
<template>
  <v-hotkey
    :keys="['ctrl', 's']"
    @triggered="saveDocument"
  >
    <v-btn>Save (Ctrl+S)</v-btn>
  </v-hotkey>
</template>

// Icon button
<template>
  <v-icon-btn
    icon="mdi-heart"
    color="red"
    @click="toggleFavorite"
  />
</template>

// Pull to refresh
<template>
  <v-pull-to-refresh
    @refresh="refreshData"
    :loading="isRefreshing"
  >
    <v-list>
      <v-list-item
        v-for="item in items"
        :key="item.id"
        :title="item.title"
      />
    </v-list>
  </v-pull-to-refresh>
</template>

Display Components

Experimental components for data visualization and content display.

/** Generic picker component */
const VPicker: Component;

/** Pie chart visualization component */
const VPie: Component;

/** Vertical stepper layout component */
const VStepperVertical: Component;

/** Video player component */
const VVideo: Component;

Usage Examples:

// Generic picker
<template>
  <v-picker
    v-model="selectedValue"
    :items="pickerItems"
    title="Select Option"
  />
</template>

// Pie chart
<template>
  <v-pie
    :data="chartData"
    :colors="chartColors"
    :size="300"
    show-labels
  />
</template>

<script setup>
const chartData = [
  { label: 'Category A', value: 30 },
  { label: 'Category B', value: 45 },
  { label: 'Category C', value: 25 },
];
</script>

// Vertical stepper
<template>
  <v-stepper-vertical v-model="currentStep">
    <v-stepper-vertical-item
      v-for="step in steps"
      :key="step.value"
      :complete="step.complete"
      :title="step.title"
      :subtitle="step.subtitle"
    >
      <template #content>
        {{ step.content }}
      </template>
    </v-stepper-vertical-item>
  </v-stepper-vertical>
</template>

// Video player
<template>
  <v-video
    :src="videoUrl"
    :poster="posterImage"
    controls
    autoplay
    muted
  />
</template>

Import Path

Lab components are imported from a separate path to indicate their experimental status:

import { VCalendar, VColorInput, VPie } from 'vuetify/labs/components';

// Or individual imports
import { VCalendar } from 'vuetify/labs/VCalendar';
import { VColorInput } from 'vuetify/labs/VColorInput';

Types

// Calendar types
interface CalendarEvent {
  name: string;
  start: Date | string;
  end?: Date | string;
  color?: string;
  timed?: boolean;
  allDay?: boolean;
  [key: string]: any;
}

interface CalendarOptions {
  weekdays?: number[] | string[];
  intervalMinutes?: number;
  intervalCount?: number;
  intervalHeight?: number;
  first?: number;
  shortWeekdays?: boolean;
}

// File upload types
interface FileUploadOptions {
  accept?: string;
  multiple?: boolean;
  maxSize?: number;
  maxFiles?: number;
  directory?: boolean;
}

interface UploadedFile {
  name: string;
  size: number;
  type: string;
  lastModified: number;
  file: File;
}

// Chart data types
interface PieChartData {
  label: string;
  value: number;
  color?: string;
}

interface ChartOptions {
  size?: number;
  thickness?: number;
  colors?: string[];
  showLabels?: boolean;
  showTooltips?: boolean;
}

// Mask input types
interface MaskOptions {
  mask: string;
  tokens?: Record<string, RegExp>;
  masked?: boolean;
  eager?: boolean;
}

// Hotkey types
interface HotkeyBinding {
  keys: string[];
  callback: () => void;
  preventDefault?: boolean;
  stopPropagation?: boolean;
}

// Stepper types
interface VerticalStepperStep {
  value: number;
  title: string;
  subtitle?: string;
  complete?: boolean;
  error?: boolean;
  disabled?: boolean;
  content?: string;
}