0
# Lab Components
1

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

4
## Capabilities
5

6
### Calendar Components
7

8
Calendar and date-related experimental components.
9

10
```typescript { .api }
11
/** Calendar view component with month, week, and day views */
12
const VCalendar: Component;
13

14
/** Calendar day cell component */
15
const VCalendarDay: Component;
16

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

20
/** Calendar interval view component */
21
const VCalendarInterval: Component;
22

23
/** Calendar event display component */
24
const VCalendarIntervalEvent: Component;
25

26
/** Calendar month day cell component */
27
const VCalendarMonthDay: Component;
28
```
29

30
**Usage Examples:**
31

32
```typescript
33
// Basic calendar
34
<template>
35
  <v-calendar
36
    v-model="selectedDate"
37
    :events="events"
38
    @click:event="handleEventClick"
39
  />
40
</template>
41

42
// Calendar with custom events
43
<template>
44
  <v-calendar
45
    v-model="date"
46
    :events="calendarEvents"
47
    color="primary"
48
  >
49
    <template #event="{ event }">
50
      <div class="custom-event">
51
        {{ event.name }}
52
      </div>
53
    </template>
54
  </v-calendar>
55
</template>
56
```
57

58
### Input Components
59

60
Experimental input components with enhanced functionality.
61

62
```typescript { .api }
63
/** Color input field component */
64
const VColorInput: Component;
65

66
/** Date input field component */
67
const VDateInput: Component;
68

69
/** Advanced file upload component */
70
const VFileUpload: Component;
71

72
/** Masked input field component */
73
const VMaskInput: Component;
74
```
75

76
**Usage Examples:**
77

78
```typescript
79
// Color input
80
<template>
81
  <v-color-input
82
    v-model="selectedColor"
83
    label="Choose color"
84
    show-swatches
85
  />
86
</template>
87

88
// Date input
89
<template>
90
  <v-date-input
91
    v-model="selectedDate"
92
    label="Select date"
93
    :min="minDate"
94
    :max="maxDate"
95
  />
96
</template>
97

98
// File upload
99
<template>
100
  <v-file-upload
101
    v-model="files"
102
    multiple
103
    accept="image/*"
104
    :max-size="5000000"
105
    @upload="handleUpload"
106
  />
107
</template>
108

109
// Masked input
110
<template>
111
  <v-mask-input
112
    v-model="phoneNumber"
113
    mask="(###) ###-####"
114
    label="Phone number"
115
  />
116
</template>
117
```
118

119
### Interaction Components
120

121
Components for advanced user interactions and functionality.
122

123
```typescript { .api }
124
/** Hotkey management component */
125
const VHotkey: Component;
126

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

130
/** Pull-to-refresh functionality component */
131
const VPullToRefresh: Component;
132
```
133

134
**Usage Examples:**
135

136
```typescript
137
// Hotkey component
138
<template>
139
  <v-hotkey
140
    :keys="['ctrl', 's']"
141
    @triggered="saveDocument"
142
  >
143
    <v-btn>Save (Ctrl+S)</v-btn>
144
  </v-hotkey>
145
</template>
146

147
// Icon button
148
<template>
149
  <v-icon-btn
150
    icon="mdi-heart"
151
    color="red"
152
    @click="toggleFavorite"
153
  />
154
</template>
155

156
// Pull to refresh
157
<template>
158
  <v-pull-to-refresh
159
    @refresh="refreshData"
160
    :loading="isRefreshing"
161
  >
162
    <v-list>
163
      <v-list-item
164
        v-for="item in items"
165
        :key="item.id"
166
        :title="item.title"
167
      />
168
    </v-list>
169
  </v-pull-to-refresh>
170
</template>
171
```
172

173
### Display Components
174

175
Experimental components for data visualization and content display.
176

177
```typescript { .api }
178
/** Generic picker component */
179
const VPicker: Component;
180

181
/** Pie chart visualization component */
182
const VPie: Component;
183

184
/** Vertical stepper layout component */
185
const VStepperVertical: Component;
186

187
/** Video player component */
188
const VVideo: Component;
189
```
190

191
**Usage Examples:**
192

193
```typescript
194
// Generic picker
195
<template>
196
  <v-picker
197
    v-model="selectedValue"
198
    :items="pickerItems"
199
    title="Select Option"
200
  />
201
</template>
202

203
// Pie chart
204
<template>
205
  <v-pie
206
    :data="chartData"
207
    :colors="chartColors"
208
    :size="300"
209
    show-labels
210
  />
211
</template>
212

213
<script setup>
214
const chartData = [
215
  { label: 'Category A', value: 30 },
216
  { label: 'Category B', value: 45 },
217
  { label: 'Category C', value: 25 },
218
];
219
</script>
220

221
// Vertical stepper
222
<template>
223
  <v-stepper-vertical v-model="currentStep">
224
    <v-stepper-vertical-item
225
      v-for="step in steps"
226
      :key="step.value"
227
      :complete="step.complete"
228
      :title="step.title"
229
      :subtitle="step.subtitle"
230
    >
231
      <template #content>
232
        {{ step.content }}
233
      </template>
234
    </v-stepper-vertical-item>
235
  </v-stepper-vertical>
236
</template>
237

238
// Video player
239
<template>
240
  <v-video
241
    :src="videoUrl"
242
    :poster="posterImage"
243
    controls
244
    autoplay
245
    muted
246
  />
247
</template>
248
```
249

250
## Import Path
251

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

254
```typescript
255
import { VCalendar, VColorInput, VPie } from 'vuetify/labs/components';
256

257
// Or individual imports
258
import { VCalendar } from 'vuetify/labs/VCalendar';
259
import { VColorInput } from 'vuetify/labs/VColorInput';
260
```
261

262
## Types
263

264
```typescript { .api }
265
// Calendar types
266
interface CalendarEvent {
267
  name: string;
268
  start: Date | string;
269
  end?: Date | string;
270
  color?: string;
271
  timed?: boolean;
272
  allDay?: boolean;
273
  [key: string]: any;
274
}
275

276
interface CalendarOptions {
277
  weekdays?: number[] | string[];
278
  intervalMinutes?: number;
279
  intervalCount?: number;
280
  intervalHeight?: number;
281
  first?: number;
282
  shortWeekdays?: boolean;
283
}
284

285
// File upload types
286
interface FileUploadOptions {
287
  accept?: string;
288
  multiple?: boolean;
289
  maxSize?: number;
290
  maxFiles?: number;
291
  directory?: boolean;
292
}
293

294
interface UploadedFile {
295
  name: string;
296
  size: number;
297
  type: string;
298
  lastModified: number;
299
  file: File;
300
}
301

302
// Chart data types
303
interface PieChartData {
304
  label: string;
305
  value: number;
306
  color?: string;
307
}
308

309
interface ChartOptions {
310
  size?: number;
311
  thickness?: number;
312
  colors?: string[];
313
  showLabels?: boolean;
314
  showTooltips?: boolean;
315
}
316

317
// Mask input types
318
interface MaskOptions {
319
  mask: string;
320
  tokens?: Record<string, RegExp>;
321
  masked?: boolean;
322
  eager?: boolean;
323
}
324

325
// Hotkey types
326
interface HotkeyBinding {
327
  keys: string[];
328
  callback: () => void;
329
  preventDefault?: boolean;
330
  stopPropagation?: boolean;
331
}
332

333
// Stepper types
334
interface VerticalStepperStep {
335
  value: number;
336
  title: string;
337
  subtitle?: string;
338
  complete?: boolean;
339
  error?: boolean;
340
  disabled?: boolean;
341
  content?: string;
342
}
343
```
344

345
## Important Notes
346

347
⚠️ **Experimental Status**: Lab components are experimental and may have:
348
- Breaking changes in minor versions
349
- Incomplete documentation
350
- Potential bugs or performance issues
351
- Limited browser support
352

353
🔄 **Migration Path**: Components may be moved to the main component library or deprecated based on usage and feedback.
354

355
📝 **Feedback**: Please provide feedback on lab components through the official Vuetify channels to help improve their stability and API design.