### Install FW Framework

Source: https://github.com/slideroom/fw/blob/master/readme.md

Installs the FW framework package using npm. This is the first step to using the framework in your Vue 2 project.

```bash
npm install @derekpitt/fw
```

--------------------------------

### Basic Network Requests

Source: https://github.com/slideroom/fw/blob/master/readme.md

Provides examples of making GET, POST, and file upload requests using the `Network` service. It shows how to retrieve data, create resources, and upload files.

```typescript
import { Network } from '@derekpitt/fw';

@needs(Network)
export class ApiService {
  constructor(private http: Network) {}

  public async getUsers(): Promise<User[]> {
    const { body } = await this.http.get<User[]>('/api/users');
    return body;
  }

  public async createUser(user: CreateUserRequest): Promise<User> {
    const { body } = await this.http.post<User>('/api/users', user);
    return body;
  }

  public async uploadFile(file: File): Promise<void> {
    const formData = new FormData();
    formData.append('file', file);
    await this.http.post('/api/upload', formData);
  }
}
```

--------------------------------

### Bootstrap FW Application

Source: https://github.com/slideroom/fw/blob/master/readme.md

Initializes the FW framework and bootstraps the Vue 2 application. It allows for setting the starting component, registering other components globally, and loading configuration.

```typescript
import { bootstrap, FrameworkConfig } from '@derekpitt/fw';
import { AppComponent } from './components/app';

bootstrap(async (config: FrameworkConfig) => {
  // Register your main application component
  config.startWith(AppComponent);

  // Register other components globally
  config.registerComponents(HomeComponent, AboutComponent);

  // Register service instances
  config.registerInstance(ApiService, new ApiService());

  // Load configuration from JSON
  const appConfig = await config.withConfig(AppConfig, '/config.json');
});
```

--------------------------------

### Network API - Basic Usage

Source: https://github.com/slideroom/fw/blob/master/readme.md

Provides a basic example of using the `Network` service for making HTTP requests like GET and POST.

```APIDOC
## Networking - Basic Usage

### Description
Basic usage of the `Network` service for making HTTP requests.

### Usage
```typescript
import { Network } from '@derekpitt/fw';

@needs(Network)
export class ApiService {
  constructor(private http: Network) {}

  public async getUsers(): Promise<User[]> {
    const { body } = await this.http.get<User[]>('/api/users');
    return body;
  }

  public async createUser(user: CreateUserRequest): Promise<User> {
    const { body } = await this.http.post<User>('/api/users', user);
    return body;
  }

  public async uploadFile(file: File): Promise<void> {
    const formData = new FormData();
    formData.append('file', file);
    await this.http.post('/api/upload', formData);
  }
}
```
```

--------------------------------

### FW Component Template Integration

Source: https://github.com/slideroom/fw/blob/master/readme.md

Shows an example HTML template for a class-based Vue component managed by FW. It demonstrates binding to component properties and methods using Vue's template syntax.

```html
<!-- user-component.html -->
<div class="user-component">
  <h1>{{ displayName }}</h1>
  <p>{{ greet() }}</p>
  <button @click="loadData">Load Data</button>
</div>
```

--------------------------------

### FW Dependency Injection Example

Source: https://github.com/slideroom/fw/blob/master/readme.md

Illustrates how to use the `@needs` decorator to specify dependencies for a class and how to inject them via the constructor in FW. This leverages the built-in IoC container.

```typescript
import { Container } from '@derekpitt/fw';

// Assuming ApiService and LoggerService are defined elsewhere

@needs(ApiService, LoggerService)
export class UserService {
  constructor(
    private api: ApiService,
    private logger: LoggerService
  ) {}

  // Methods that use api and logger...
}

// Example of resolving dependencies from the container:
// const userService = Container.get(UserService);
// const apiServiceInstance = Container.get(ApiService);

```

--------------------------------

### Core Framework API

Source: https://github.com/slideroom/fw/blob/master/readme.md

Documentation for the core initialization and configuration methods of the FW framework.

```APIDOC
## Core Framework

### `bootstrap(callback: (config: FrameworkConfig) => Promise<void>)`

Initializes the framework with the provided configuration.

### `FrameworkConfig`

Configuration object for setting up your application:

- `startWith(component: Function)` - Sets the root component
- `registerComponents(...components: Function[])` - Registers components globally
- `registerInstance<T>(key: Class<T>, instance: T)` - Registers service instances
- `withConfig<T>(configType: Class<T>, fileName: string)` - Loads configuration from JSON
- `useVuePlugin(plugin)` - Registers Vue plugins
```

--------------------------------

### Network API - HTTP Methods

Source: https://github.com/slideroom/fw/blob/master/readme.md

Lists the available HTTP methods supported by the `Network` service.

```APIDOC
## Networking - HTTP Methods

### Description
Available HTTP methods for the `Network` service.

### Methods
- `get<T>(url: string, params?: NVP): Promise<{headers: NVP, body: T}>`
- `post<T>(url: string, content: unknown, params?: NVP): Promise<{headers: NVP, body: T}>`
- `put<T>(url: string, content: unknown, params?: NVP): Promise<{headers: NVP, body: T}>`
- `patch<T>(url: string, content: unknown, params?: NVP): Promise<{headers: NVP, body: T}>`
- `delete<T>(url: string, params?: NVP): Promise<{headers: NVP, body: T}>`
```

--------------------------------

### Network Middleware API

Source: https://github.com/slideroom/fw/blob/master/readme.md

Demonstrates how to implement and register middleware for network requests and responses to add functionality like authentication and logging.

```APIDOC
## Network Middleware

### Description
Implement and register middleware for network requests and responses.

### Request Middleware Example
```typescript
export class AuthRequestMiddleware implements NetworkRequestMiddleware {
  public onRequest(context: RequestContext) {
    const token = localStorage.getItem('auth-token');
    if (token) {
      context.addHeader('Authorization', `Bearer ${token}`);
    }
  }
}
```

### Response Middleware Example
```typescript
export class LoggingResponseMiddleware implements NetworkResponseMiddleware {
  public onResponse(context: ResponseContext) {
    console.log(`Response: ${context.statusCode}`, context.data);
  }
}
```

### Registration
```typescript
// Register middleware on Network instance
@needs(Network)
export class ApiService {
  constructor(private http: Network) {
    // Register middleware when service is created
    this.http.addMiddleware(AuthRequestMiddleware);
    this.http.addMiddleware(LoggingResponseMiddleware);
  }
}
```
```

--------------------------------

### Network Middleware for Auth and Logging

Source: https://github.com/slideroom/fw/blob/master/readme.md

Shows how to implement and register network middleware to add request headers (e.g., authentication tokens) and log responses.

```typescript
export class AuthRequestMiddleware implements NetworkRequestMiddleware {
  public onRequest(context: RequestContext) {
    const token = localStorage.getItem('auth-token');
    if (token) {
      context.addHeader('Authorization', `Bearer ${token}`);
    }
  }
}

export class LoggingResponseMiddleware implements NetworkResponseMiddleware {
  public onResponse(context: ResponseContext) {
    console.log(`Response: ${context.statusCode}`, context.data);
  }
}

// Register middleware on Network instance
@needs(Network)
export class ApiService {
  constructor(private http: Network) {
    // Register middleware when service is created
    this.http.addMiddleware(AuthRequestMiddleware);
    this.http.addMiddleware(LoggingResponseMiddleware);
  }
}
```

--------------------------------

### Network Request Methods

Source: https://github.com/slideroom/fw/blob/master/readme.md

Lists the available HTTP methods supported by the `Network` service, including their generic type parameters and expected arguments.

```typescript
- `get<T>(url: string, params?: NVP): Promise<{headers: NVP, body: T}>`
- `post<T>(url: string, content: unknown, params?: NVP): Promise<{headers: NVP, body: T}>`
- `put<T>(url: string, content: unknown, params?: NVP): Promise<{headers: NVP, body: T}>`
- `patch<T>(url: string, content: unknown, params?: NVP): Promise<{headers: NVP, body: T}>`
- `delete<T>(url: string, params?: NVP): Promise<{headers: NVP, body: T}>`
```

--------------------------------

### Publishing and Subscribing to Events

Source: https://github.com/slideroom/fw/blob/master/readme.md

Demonstrates using the `Bus` service to publish events and subscribe to them, allowing for decoupled communication between different parts of the application.

```typescript
import { Bus } from '@derekpitt/fw';

// Define event types
export class UserLoggedIn {
  constructor(public user: User) {}
}

export class DataUpdated {
  constructor(public data: unknown) {}
}

@needs(Bus)
export class MyService {
  constructor(private bus: Bus) {}

  public login(user: User) {
    // Publish events
    this.bus.publish(new UserLoggedIn(user));
  }

  public subscribeToEvents() {
    // Subscribe to events
    const subscription = this.bus.subscribe(UserLoggedIn, (event) => {
      console.log('User logged in:', event.user);
    });

    // Dispose subscription when done
    subscription.dispose();
  }
}
```

--------------------------------

### Component Dependency Injection API

Source: https://github.com/slideroom/fw/blob/master/readme.md

Illustrates how to inject dependencies into components using the `@provided` decorator.

```APIDOC
## Component Dependency Injection

### Description
Inject dependencies into components using the `@provided` decorator.

### Usage
```typescript
export class MyComponent {
  @provided('defaultValue')
  public injectedValue: string;
}
```
```

--------------------------------

### Navigation within Components

Source: https://github.com/slideroom/fw/blob/master/readme.md

Demonstrates how to use the Navigator service to programmatically navigate between routes, optionally including query parameters.

```typescript
import { Navigator } from '@derekpitt/fw';

@needs(Navigator)
export class MyComponent {
  constructor(private navigator: Navigator) {}

  public goToUser(userId: string) {
    this.navigator.navigate(`/users/${userId}`);
  }

  public goToUserWithQuery(userId: string) {
    this.navigator.navigate(`/users/${userId}`, { tab: 'profile', edit: true });
  }
}
```

--------------------------------

### Navigation API

Source: https://github.com/slideroom/fw/blob/master/readme.md

Shows how to programmatically navigate between routes using the Navigator service, including passing query parameters.

```APIDOC
## Navigation

### Description
Programmatically navigate between routes using the Navigator service.

### Usage
```typescript
import { Navigator } from '@derekpitt/fw';

@needs(Navigator)
export class MyComponent {
  constructor(private navigator: Navigator) {}

  public goToUser(userId: string) {
    this.navigator.navigate(`/users/${userId}`);
  }

  public goToUserWithQuery(userId: string) {
    this.navigator.navigate(`/users/${userId}`, { tab: 'profile', edit: true });
  }
}
```
```

--------------------------------

### Dependency Injection API

Source: https://github.com/slideroom/fw/blob/master/readme.md

API details for managing dependencies using decorators and the container.

```APIDOC
## Dependency Injection

### `@inject`

Marks a class for dependency injection.

### `@needs(...dependencies: Class[])`

Specifies dependencies for a class.

```typescript
@needs(ApiService, LoggerService)
export class UserService {
  constructor(
    private api: ApiService,
    private logger: LoggerService
  ) {}
}
```

### `Container`

- `get<T>(type: Class<T>)` - Resolves an instance
- `use<T>(key: Class<T>, instance: T)` - Registers an instance
```

--------------------------------

### TypeScript Configuration for CloseStack

Source: https://github.com/slideroom/fw/blob/master/readme.md

Provides essential compiler options for the TypeScript configuration file (tsconfig.json) required for the Slideroom FW project, including decorator and module resolution settings.

```json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "node"
  }
}
```

--------------------------------

### Event Bus API

Source: https://github.com/slideroom/fw/blob/master/readme.md

Shows how to publish and subscribe to events using the `Bus` service for inter-component communication.

```APIDOC
## Event Bus

### Description
Publish and subscribe to events for inter-component communication.

### Publishing and Subscribing
```typescript
import { Bus } from '@derekpitt/fw';

// Define event types
export class UserLoggedIn {
  constructor(public user: User) {}
}

export class DataUpdated {
  constructor(public data: unknown) {}
}

@needs(Bus)
export class MyService {
  constructor(private bus: Bus) {}

  public login(user: User) {
    // Publish events
    this.bus.publish(new UserLoggedIn(user));
  }

  public subscribeToEvents() {
    // Subscribe to events
    const subscription = this.bus.subscribe(UserLoggedIn, (event) => {
      console.log('User logged in:', event.user);
    });

    // Dispose subscription when done
    subscription.dispose();
  }
}
```
```

--------------------------------

### Component Dependency Injection

Source: https://github.com/slideroom/fw/blob/master/readme.md

Illustrates dependency injection in components using the `@provided` decorator to inject services or values.

```typescript
export class MyComponent {
  @provided('defaultValue')
  public injectedValue: string;
}
```

--------------------------------

### Create Class-Based Vue Components with FW

Source: https://github.com/slideroom/fw/blob/master/readme.md

Demonstrates creating a Vue component using TypeScript classes and FW decorators. It covers property declaration, dependency injection, lifecycle hooks, routing configuration, computed properties, and watchers.

```typescript
import { prop, needs, inject } from '@derekpitt/fw';
import { MyService } from '../services/my-service';

@needs(MyService)
export class UserComponent {
  @prop('John Doe')
  public name: string;

  @prop(0)
  public age: number;

  constructor(private myService: MyService) {}

  public greet() {
    return `Hello, ${this.name}! You are ${this.age} years old.`;
  }

  public async loadData() {
    const data = await this.myService.fetchUserData();
    // Handle data...
  }

  // Vue lifecycle hooks
  public created() {
    console.log('Component created');
  }

  public attached() {
    console.log('Component mounted');
  }

  public beforeDetach() {
    console.log('Component about to be destroyed');
  }

  public detached() {
    console.log('Component destroyed');
  }

  // Route activation (for routed components)
  public activate(params: unknown) {
    console.log('Route activated with params:', params);
  }

  // Route setup (for routed components)
  public registerRoutes(router: RouterConfig) {
    router.add('/users/:id', UserDetailComponent);
    router.add('/users/:id/edit', UserEditComponent);
  }

  // Computed properties
  public get displayName() {
    return this.name.toUpperCase();
  }

  // Property change watchers
  public nameChanged(newValue: string, oldValue: string) {
    console.log(`Name changed from ${oldValue} to ${newValue}`);
  }
}
```

--------------------------------

### Routing API

Source: https://github.com/slideroom/fw/blob/master/readme.md

API for configuring file-based and component-based routing.

```APIDOC
## Routing

Routes are configured within components using the `registerRoutes` method. The framework uses a hierarchical routing system where each component can define its own child routes.

### Component-Based Routing

```typescript
import { RouterConfig } from '@derekpitt/fw';

export class AppComponent {
  // Define routes for this component
  public registerRoutes(router: RouterConfig) {
    router.add('/', HomeComponent);
    router.add('/users', UserListComponent);
    router.add('/users/:id', UserDetailComponent);
    router.add('/admin', AdminComponent, { requiresAuth: true });
  }

  // Called when a route is activated
  public activate(params: unknown) {
    console.log('Route params:', params);
  }
}
```
```

--------------------------------

### Property Binding API

Source: https://github.com/slideroom/fw/blob/master/readme.md

Demonstrates how to declare and bind properties within components using the `@prop` decorator.

```APIDOC
## Property Binding

### Description
Declare and bind properties within components using the `@prop` decorator.

### Usage
```typescript
export class MyComponent {
  @prop('default value')
  public title: string;

  @prop(null)
  public user: User;

  @prop([])
  public items: unknown[];
}
```
```

--------------------------------

### kebab Utility Function

Source: https://github.com/slideroom/fw/blob/master/readme.md

A utility function to convert PascalCase strings to kebab-case.

```APIDOC
## Utilities - kebab

### Description
Converts PascalCase to kebab-case.

### Signature
`kebab(name: string): string`
```

--------------------------------

### Route Middleware API

Source: https://github.com/slideroom/fw/blob/master/readme.md

Explains how to implement and register route middleware to control navigation flow, such as authentication checks.

```APIDOC
## Route Middleware

### Description
Implement and register middleware to intercept and control navigation.

### Middleware Implementation
```typescript
import { RouterMiddlware, Route, RouterConfig } from '@derekpitt/fw';

export class AuthMiddleware implements RouterMiddlware {
  public navigating(route: Route, fullRoute: string): boolean {
    // Return false to prevent navigation
    if (route.data?.requiresAuth && !this.isAuthenticated()) {
      return false;
    }
    return true;
  }
}
```

### Registration
```typescript
// Register middleware in your component's router setup
export class AppComponent {
  public registerRoutes(router: RouterConfig) {
    router.addMiddleware(AuthMiddleware);
    router.add('/admin', AdminComponent, { requiresAuth: true });
  }
}
```
```

--------------------------------

### CloseStack Usage with TypeScript

Source: https://github.com/slideroom/fw/blob/master/readme.md

Demonstrates how to use the CloseStack class to manage a stack of closeable items in TypeScript. It shows enrolling an item, closing it, and closing items above it.

```typescript
import { CloseStack } from '@derekpitt/fw';

const closeStack = new CloseStack();

const modal = closeStack.enroll(() => {
  console.log('Modal closed');
});

// Close this modal
modal.close();

// Close this modal and all above it
modal.closeAbove();
```

--------------------------------

### Event Handling API

Source: https://github.com/slideroom/fw/blob/master/readme.md

Explains how to handle component events, dispatch custom events, and update v-model using the `ComponentEventBus`.

```APIDOC
## Event Handling

### Description
Handle component events, dispatch custom events, and manage v-model updates.

### Usage
```typescript
import { ComponentEventBus } from '@derekpitt/fw';

@needs(ComponentEventBus)
export class MyComponent {
  constructor(private eventBus: ComponentEventBus) {}

  public handleClick() {
    // Emit custom events
    this.eventBus.dispatch('custom-event', { data: 'value' });

    // Update v-model
    this.eventBus.updateModel('new value');
  }
}
```
```

--------------------------------

### Route Middleware for Authentication

Source: https://github.com/slideroom/fw/blob/master/readme.md

Implements route middleware to control navigation based on certain conditions, such as user authentication status. The `navigating` method returns false to block navigation.

```typescript
import { RouterMiddlware, Route, RouterConfig } from '@derekpitt/fw';

export class AuthMiddleware implements RouterMiddlware {
  public navigating(route: Route, fullRoute: string): boolean {
    // Return false to prevent navigation
    if (route.data?.requiresAuth && !this.isAuthenticated()) {
      return false;
    }
    return true;
  }
}

// Register middleware in your component's router setup
export class AppComponent {
  public registerRoutes(router: RouterConfig) {
    router.addMiddleware(AuthMiddleware);
    router.add('/admin', AdminComponent, { requiresAuth: true });
  }
}
```

--------------------------------

### FW Component-Based Routing Configuration

Source: https://github.com/slideroom/fw/blob/master/readme.md

Demonstrates how to configure routes within a component using the `registerRoutes` method in FW. This allows for hierarchical routing where components can define their own child routes.

```typescript
import { RouterConfig } from '@derekpitt/fw';

// Assuming HomeComponent, UserListComponent, UserDetailComponent, AdminComponent are defined elsewhere

export class AppComponent {
  // Define routes for this component
  public registerRoutes(router: RouterConfig) {
    router.add('/', HomeComponent);
    router.add('/users', UserListComponent);
    router.add('/users/:id', UserDetailComponent);
    router.add('/admin', AdminComponent, { requiresAuth: true });
  }

  // Called when a route is activated
  public activate(params: unknown) {
    console.log('Route params:', params);
  }
}
```

--------------------------------

### Nested Routing API

Source: https://github.com/slideroom/fw/blob/master/readme.md

Demonstrates how to define nested routes within a component, allowing for structured navigation within specific sections of an application.

```APIDOC
## Nested Routing

### Description
Defines nested routes within a component to structure navigation.

### Usage
```typescript
export class UserDetailComponent {
  public registerRoutes(router: RouterConfig) {
    // These routes will be available as /users/:id/profile, /users/:id/posts, etc.
    router.add('/profile', UserProfileComponent);
    router.add('/posts', UserPostsComponent);
    router.add('/posts/:postId', PostDetailComponent);
  }

  public activate(params: unknown) {
    const userId = params.id;
    // Load user data...
  }
}
```
```

--------------------------------

### Kebab-case Conversion Utility

Source: https://github.com/slideroom/fw/blob/master/readme.md

A utility function `kebab` that converts strings from PascalCase to kebab-case, useful for generating CSS class names or route parameters.

```typescript
#### `kebab(name: string): string`

Converts PascalCase to kebab-case.
```

--------------------------------

### Component Event Handling

Source: https://github.com/slideroom/fw/blob/master/readme.md

Demonstrates emitting custom events and updating v-model values using the `ComponentEventBus` service.

```typescript
import { ComponentEventBus } from '@derekpitt/fw';

@needs(ComponentEventBus)
export class MyComponent {
  constructor(private eventBus: ComponentEventBus) {}

  public handleClick() {
    // Emit custom events
    this.eventBus.dispatch('custom-event', { data: 'value' });

    // Update v-model
    this.eventBus.updateModel('new value');
  }
}
```

--------------------------------

### Property Binding in Components

Source: https://github.com/slideroom/fw/blob/master/readme.md

Shows how to declare component properties with default values using the `@prop` decorator, facilitating data binding.

```typescript
export class MyComponent {
  @prop('default value')
  public title: string;

  @prop(null)
  public user: User;

  @prop([])
  public items: unknown[];
}
```

--------------------------------

### Nested Routing Configuration

Source: https://github.com/slideroom/fw/blob/master/readme.md

Defines nested routes within a component for hierarchical navigation. This allows for routes like /users/:id/profile and /users/:id/posts.

```typescript
export class UserDetailComponent {
  public registerRoutes(router: RouterConfig) {
    // These routes will be available as /users/:id/profile, /users/:id/posts, etc.
    router.add('/profile', UserProfileComponent);
    router.add('/posts', UserPostsComponent);
    router.add('/posts/:postId', PostDetailComponent);
  }

  public activate(params: unknown) {
    const userId = params.id;
    // Load user data...
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.