npm package: @orion-ds/vue
Description: Orion Design System - Vue 3 composables and components
Author: Orion Design System Team
Latest version: 1.0.6

# @orion/vue

Vue 3 composables for the Orion Design System.

## Installation

```bash
npm install @orion/vue @orion/core
# or
pnpm add @orion/vue @orion/core
# or
yarn add @orion/vue @orion/core
```

## Quick Start

```vue
<script setup>
import { useTheme } from '@orion/vue';
import '@orion/core/theme.css';

const { theme, brand, setTheme, setBrand, toggleTheme } = useTheme();
</script>

<template>
  <div>
    <button @click="toggleTheme">
      {{ theme === 'light' ? '🌙' : '☀️' }}
    </button>

    <select :value="brand" @change="setBrand($event.target.value)">
      <option value="orion">Orion</option>
      <option value="uvm">UVM</option>
      <option value="unitec">Unitec</option>
      <option value="laureate">Laureate</option>
    </select>
  </div>
</template>
```

## Composables

### useTheme

Composable for managing theme and brand state.

#### Returns

| Property | Type | Description |
|----------|------|-------------|
| `theme` | `Ref<Theme>` | Current theme (`'light' \| 'dark'`) |
| `brand` | `Ref<Brand>` | Current brand |
| `setTheme` | `(theme: Theme) => void` | Set theme |
| `setBrand` | `(brand: Brand) => void` | Set brand |
| `toggleTheme` | `() => void` | Toggle between light/dark |
| `isDark` | `ComputedRef<boolean>` | True if dark theme |
| `isLight` | `ComputedRef<boolean>` | True if light theme |

#### Options

```vue
<script setup>
const { theme, brand } = useTheme({
  defaultTheme: 'light',      // Default theme
  defaultBrand: 'orion',       // Default brand
  storageEnabled: true,        // Use localStorage
  storageKey: 'orion-theme',   // localStorage key for theme
  brandStorageKey: 'orion-brand' // localStorage key for brand
});
</script>
```

#### Examples

**Theme Toggle**
```vue
<script setup>
import { useTheme } from '@orion/vue';

const { theme, toggleTheme } = useTheme();
</script>

<template>
  <button @click="toggleTheme">
    {{ theme === 'light' ? '🌙' : '☀️' }}
  </button>
</template>
```

**Brand Selector**
```vue
<script setup>
import { useTheme } from '@orion/vue';

const { brand, setBrand } = useTheme();
</script>

<template>
  <select :value="brand" @change="setBrand($event.target.value)">
    <option value="orion">Orion</option>
    <option value="uvm">UVM</option>
    <option value="unitec">Unitec</option>
    <option value="laureate">Laureate</option>
  </select>
</template>
```

**Conditional Rendering**
```vue
<script setup>
import { useTheme } from '@orion/vue';

const { isDark, isLight } = useTheme();
</script>

<template>
  <div>
    <p v-if="isDark">Dark mode is enabled</p>
    <p v-if="isLight">Light mode is enabled</p>
  </div>
</template>
```

## TypeScript

Full TypeScript support with type-safe imports:

```vue
<script setup lang="ts">
import { useTheme } from '@orion/vue';
import type { Theme, Brand } from '@orion/vue';

const { theme, brand } = useTheme();

// Type-safe values
const currentTheme: Theme = theme.value; // ✅
const currentBrand: Brand = brand.value; // ✅
</script>
```

## Framework Integration

### Vite + Vue 3

```ts
// main.ts
import { createApp } from 'vue';
import '@orion/core/theme.css';
import App from './App.vue';

createApp(App).mount('#app');
```

```vue
<!-- App.vue -->
<script setup>
import { useTheme } from '@orion/vue';

const { theme, toggleTheme } = useTheme();
</script>

<template>
  <button @click="toggleTheme">
    Toggle theme
  </button>
</template>
```

### Nuxt 3

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  css: ['@orion/core/theme.css']
});
```

```vue
<!-- app.vue -->
<script setup>
import { useTheme } from '@orion/vue';

const { theme, toggleTheme } = useTheme();
</script>

<template>
  <button @click="toggleTheme">
    Toggle theme
  </button>
</template>
```

## License

MIT