npm package: @inadigital-ui/vue
Description: Vue 3 UI component library for INA Digital Design System
Author: INA Digital
Latest version: 1.0.51

# @inadigital-ui/vue

Vue 3 UI component library for INA Digital Design System.

## Installation

```bash
npm install @inadigital-ui/vue
```

## Usage

### Basic Setup

```vue
<template>
  <div>
    <Button variant="primary" size="md">Click me</Button>
    <TextField v-model="value" label="Name" placeholder="Enter your name" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Button, TextField } from '@inadigital-ui/vue';
import '@inadigital-ui/vue/index.css';

const value = ref('');
</script>
```

### Import Individual Components

```vue
<script setup>
import { Button, TextField, SelectDropdown } from '@inadigital-ui/vue';
</script>
```

### Import All Components

```vue
<script setup>
import InaDigitalUI from '@inadigital-ui/vue';

// Use components
const { Button, TextField, SelectDropdown } = InaDigitalUI;
</script>
```

## Components

### Button

```vue
<Button
  variant="primary"
  size="md"
  :disabled="false"
  :loading="false"
  @click="handleClick"
>
  Button Text
</Button>
```

**Props:**

- `variant`: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger'
- `size`: 'sm' | 'md' | 'lg'
- `disabled`: boolean
- `loading`: boolean
- `type`: 'button' | 'submit' | 'reset'
- `tag`: string

### TextField

```vue
<TextField
  v-model="value"
  label="Email"
  placeholder="Enter your email"
  type="email"
  size="md"
  :disabled="false"
  :readonly="false"
  :required="true"
  :show-clear-button="true"
  @input="handleInput"
/>
```

**Props:**

- `modelValue`: string
- `label`: string
- `placeholder`: string
- `type`: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'
- `size`: 'sm' | 'md' | 'lg'
- `status`: 'neutral' | 'success' | 'error' | 'warning'
- `statusMessage`: string
- `disabled`: boolean
- `readonly`: boolean
- `required`: boolean
- `maxLength`: number
- `showCharCount`: boolean
- `showClearButton`: boolean
- `prefixIcon`: Component
- `debounce`: number

### PasswordInput

```vue
<PasswordInput
  v-model="password"
  label="Password"
  placeholder="Enter your password"
  size="md"
  :show-char-count="true"
  :max-length="20"
/>
```

**Props:**

- `modelValue`: string
- `label`: string
- `placeholder`: string
- `size`: 'sm' | 'md' | 'lg'
- `status`: 'neutral' | 'success' | 'error' | 'warning'
- `statusMessage`: string
- `disabled`: boolean
- `readonly`: boolean
- `required`: boolean
- `maxLength`: number
- `showCharCount`: boolean

### SelectDropdown

```vue
<SelectDropdown
  v-model="selected"
  :options="options"
  label="Select Option"
  placeholder="Choose an option"
  size="md"
  :multiple="false"
  indicator="check"
/>
```

**Props:**

- `modelValue`: any | any[]
- `options`: SelectOption[]
- `label`: string
- `placeholder`: string
- `size`: 'sm' | 'md' | 'lg'
- `status`: 'neutral' | 'success' | 'error' | 'warning'
- `statusMessage`: string
- `disabled`: boolean
- `required`: boolean
- `multiple`: boolean
- `indicator`: 'check' | 'radio'
- `searchable`: boolean
- `clearable`: boolean

### TimePicker

```vue
<TimePicker v-model="time" label="Time" placeholder="Select time" size="md" />
```

**Props:**

- `modelValue`: string
- `label`: string
- `placeholder`: string
- `size`: 'sm' | 'md' | 'lg'
- `status`: 'neutral' | 'success' | 'error' | 'warning'
- `statusMessage`: string
- `disabled`: boolean
- `readonly`: boolean
- `required`: boolean

### YearPicker

```vue
<YearPicker
  v-model="year"
  label="Year"
  placeholder="Select year"
  size="md"
  :min-year="2000"
  :max-year="2030"
  :show-icon="true"
  :show-clear-button="true"
/>
```

**Props:**

- `modelValue`: number
- `label`: string
- `placeholder`: string
- `size`: 'sm' | 'md' | 'lg'
- `status`: 'neutral' | 'success' | 'error' | 'warning'
- `statusMessage`: string
- `disabled`: boolean
- `readonly`: boolean
- `required`: boolean
- `minYear`: number
- `maxYear`: number
- `showIcon`: boolean
- `showClearButton`: boolean

### MonthPicker

```vue
<MonthPicker
  v-model="month"
  label="Month"
  placeholder="Select month"
  size="md"
  :show-icon="true"
  :show-clear-button="true"
/>
```

**Props:**

- `modelValue`: number
- `label`: string
- `placeholder`: string
- `size`: 'sm' | 'md' | 'lg'
- `status`: 'neutral' | 'success' | 'error' | 'warning'
- `statusMessage`: string
- `disabled`: boolean
- `readonly`: boolean
- `required`: boolean
- `showIcon`: boolean
- `showClearButton`: boolean

### DatePicker

```vue
<DatePicker
  v-model="date"
  mode="single"
  label="Date"
  placeholder="date picker"
  size="md"
  :show-icon="true"
  :show-clear-button="true"
  date-format="DD/MM/YYYY"
/>
```

**Props:**

- `modelValue`: string | [string, string] | string[]
- `mode`: 'single' | 'range' | 'multiple'
- `label`: string
- `placeholder`: string
- `size`: 'sm' | 'md' | 'lg'
- `status`: 'neutral' | 'success' | 'error' | 'warning'
- `statusMessage`: string
- `disabled`: boolean
- `readonly`: boolean
- `required`: boolean
- `showIcon`: boolean
- `showClearButton`: boolean
- `dateFormat`: string
- `minDate`: Date
- `maxDate`: Date
- `disabledDates`: Date[]

## Theme System

### Setting Brand Theme

```javascript
import { setBrandTheme } from '@inadigital-ui/vue';

// Set brand theme
setBrandTheme('brandname');

// Remove brand theme (use default)
setBrandTheme(null);
```

## Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Type checking
npm run type-check

# Linting
npm run lint
```

## License

MIT