0
# Base Classes
1

2
Foundation classes providing core functionality for PrimeVue components and directives. These classes handle theming, styling, PassThrough configuration, and lifecycle management.
3

4
## Capabilities
5

6
### BaseComponent
7

8
Core Vue component providing fundamental PrimeVue component functionality including theming, styling, and PassThrough support.
9

10
```typescript { .api }
11
declare const BaseComponent: DefineComponent<{
12
  /** PassThrough configuration object */
13
  pt?: Object;
14
  /** PassThrough options */
15
  ptOptions?: Object;
16
  /** Enable unstyled mode */
17
  unstyled?: Boolean;
18
  /** Design token object */
19
  dt?: Object;
20
}>;
21
```
22

23
**Component Methods:**
24

25
```typescript { .api }
26
interface BaseComponentMethods {
27
  /**
28
   * Get PassThrough configuration for a key
29
   * @param key - Configuration key
30
   * @param params - Additional parameters
31
   * @returns PassThrough object
32
   */
33
  ptm(key?: string, params?: object): any;
34
  
35
  /**
36
   * Get PassThrough configuration with inherited attributes
37
   * @param key - Configuration key  
38
   * @param params - Additional parameters
39
   * @returns PassThrough object with attributes
40
   */
41
  ptmi(key?: string, params?: object): any;
42
  
43
  /**
44
   * Get PassThrough configuration from custom object
45
   * @param obj - Custom object
46
   * @param key - Configuration key
47
   * @param params - Additional parameters
48
   * @returns PassThrough object
49
   */
50
  ptmo(obj?: object, key?: string, params?: object): any;
51
  
52
  /**
53
   * Get CSS classes for styling
54
   * @param key - Style key
55
   * @param params - Additional parameters
56
   * @returns CSS class string or undefined
57
   */
58
  cx(key?: string, params?: object): string | undefined;
59
  
60
  /**
61
   * Get inline styles
62
   * @param key - Style key
63
   * @param when - Condition for applying styles
64
   * @param params - Additional parameters
65
   * @returns Inline style array or undefined
66
   */
67
  sx(key?: string, when?: boolean, params?: object): any[] | undefined;
68
}
69
```
70

71
**Computed Properties:**
72

73
```typescript { .api }
74
interface BaseComponentComputed {
75
  /** Component ID */
76
  readonly $id: string;
77
  /** Current theme configuration */
78
  readonly $theme: any;
79
  /** Style configuration object */
80
  readonly $style: any;
81
  /** PrimeVue configuration */
82
  readonly $primevueConfig: PrimeVueConfiguration;
83
  /** Whether component is in unstyled mode */
84
  readonly isUnstyled: boolean;
85
  /** Component name */
86
  readonly $name: string;
87
  /** Component parameters for PassThrough */
88
  readonly $params: object;
89
}
90
```
91

92
**Usage Examples:**
93

94
```typescript
95
// Extending BaseComponent
96
import BaseComponent from '@primevue/core/basecomponent';
97

98
export default {
99
  name: 'MyComponent',
100
  extends: BaseComponent,
101
  template: `
102
    <div v-bind="ptm('root')" :class="cx('root')">
103
      <span v-bind="ptm('label')">{{ label }}</span>
104
    </div>
105
  `,
106
  props: {
107
    label: String
108
  }
109
};
110

111
// Using PassThrough configuration
112
<MyComponent 
113
  :pt="{
114
    root: { class: 'my-custom-class' },
115
    label: { style: 'color: red' }
116
  }"
117
/>
118
```
119

120
### BaseDirective
121

122
Factory for creating Vue directives with PrimeVue functionality including styling, theming, and PassThrough support.
123

124
```typescript { .api }
125
declare const BaseDirective: {
126
  /**
127
   * Create a directive with base PrimeVue functionality
128
   * @param name - Directive name
129
   * @param options - Directive options and methods
130
   * @returns Vue directive object
131
   */
132
  extend(name: string, options?: any): any;
133
};
134
```
135

136
**Directive Instance Methods:**
137

138
```typescript { .api }
139
interface DirectiveInstance {
140
  /** Directive name */
141
  readonly $name: string;
142
  /** Host DOM element */
143
  readonly $host: Element;
144
  /** Vue directive binding */
145
  readonly $binding: any;
146
  /** Binding modifiers */
147
  readonly $modifiers: object;
148
  /** Binding value */
149
  readonly $value: any;
150
  /** PrimeVue configuration */
151
  readonly $primevueConfig: PrimeVueConfiguration;
152
  
153
  /**
154
   * Get PassThrough configuration
155
   * @param key - Configuration key
156
   * @param params - Additional parameters
157
   * @returns PassThrough object
158
   */
159
  ptm(key?: string, params?: object): any;
160
  
161
  /**
162
   * Get PassThrough configuration from custom object
163
   * @param obj - Custom object
164
   * @param key - Configuration key
165
   * @param params - Additional parameters
166
   * @returns PassThrough object
167
   */
168
  ptmo(obj?: object, key?: string, params?: object): any;
169
  
170
  /**
171
   * Get CSS classes
172
   * @param key - Style key
173
   * @param params - Additional parameters
174
   * @returns CSS class string or undefined
175
   */
176
  cx(key?: string, params?: object): string | undefined;
177
  
178
  /**
179
   * Get inline styles
180
   * @param key - Style key
181
   * @param when - Condition for applying styles
182
   * @param params - Additional parameters
183
   * @returns Inline style object or undefined
184
   */
185
  sx(key?: string, when?: boolean, params?: object): any | undefined;
186
  
187
  /**
188
   * Check if directive is in unstyled mode
189
   * @returns Boolean indicating unstyled state
190
   */
191
  isUnstyled(): boolean;
192
  
193
  /**
194
   * Get current theme
195
   * @returns Theme configuration
196
   */
197
  theme(): any;
198
}
199
```
200

201
**Usage Examples:**
202

203
```typescript
204
import BaseDirective from '@primevue/core/basedirective';
205

206
// Create a custom directive
207
const MyDirective = BaseDirective.extend('mydirective', {
208
  mounted(el, binding, vnode) {
209
    const instance = el.$mydirective; // directive instance
210
    
211
    // Use directive methods
212
    el.className = instance.cx('root');
213
    el.setAttribute('data-theme', instance.theme());
214
  },
215
  
216
  style: {
217
    classes: {
218
      root: 'my-directive-root'
219
    }
220
  }
221
});
222

223
// Register directive
224
app.directive('mydirective', MyDirective);
225

226
// Use in template
227
<div v-mydirective="{ value: 'test' }"></div>
228
```
229

230
### BaseEditableHolder
231

232
Base Vue component for editable content containers.
233

234
```typescript { .api }
235
declare const BaseEditableHolder: DefineComponent<{}>;
236
```
237

238
### BaseInput
239

240
Base Vue component for input elements.
241

242
```typescript { .api }
243
declare const BaseInput: DefineComponent<{}>;
244
```
245

246
### Base Utility
247

248
Core utility object for managing style loading state across components.
249

250
```typescript { .api }
251
declare const Base: {
252
  /**
253
   * Get set of loaded style names
254
   * @returns Set of loaded style names
255
   */
256
  getLoadedStyleNames(): Set<string>;
257
  
258
  /**
259
   * Check if a style name is loaded
260
   * @param name - Style name to check
261
   * @returns Boolean indicating if style is loaded
262
   */
263
  isStyleNameLoaded(name: string): boolean;
264
  
265
  /**
266
   * Mark a style name as loaded
267
   * @param name - Style name to mark as loaded
268
   */
269
  setLoadedStyleName(name: string): void;
270
  
271
  /**
272
   * Remove a style name from loaded set
273
   * @param name - Style name to remove
274
   */
275
  deleteLoadedStyleName(name: string): void;
276
  
277
  /**
278
   * Clear all loaded style names
279
   */
280
  clearLoadedStyleNames(): void;
281
};
282
```
283

284
### BaseStyle
285

286
Base styling functionality (re-exported from @primeuix/styled).
287

288
```typescript { .api }
289
declare const BaseStyle: {
290
  /**
291
   * Load CSS styles
292
   * @param options - Style options
293
   */
294
  loadCSS(options?: any): void;
295
  
296
  /**
297
   * Load CSS content
298
   * @param css - CSS content  
299
   * @param options - Load options
300
   */
301
  load(css?: string, options?: any): void;
302
  
303
  /**
304
   * Load inline styles
305
   * @param options - Style options
306
   * @param content - Style content
307
   */
308
  loadStyle(options?: any, content?: any): void;
309
  
310
  /**
311
   * Get common theme styles
312
   * @returns Theme style object
313
   */
314
  getCommonTheme?(): any;
315
};
316
```
317

318
## Styling System
319

320
Base classes provide a comprehensive styling system:
321

322
- **Theme Management**: Automatic theme loading and switching
323
- **PassThrough Support**: Customizable component styling
324
- **Unstyled Mode**: Complete style removal capability
325
- **CSS-in-JS**: Dynamic style injection
326
- **Design Tokens**: Token-based theming system
327

328
## Import Patterns
329

330
```typescript
331
// Individual imports (recommended)
332
import BaseComponent from '@primevue/core/basecomponent';
333
import BaseDirective from '@primevue/core/basedirective';
334
import Base from '@primevue/core/base';
335
import BaseStyle from '@primevue/core/base/style';
336

337
// Named imports from main package
338
import { BaseComponent, BaseDirective } from '@primevue/core';
339

340
// Style imports
341
import BaseComponentStyle from '@primevue/core/basecomponent/style';
342
```