@inadigital-ui/vue

Vue 3 UI component library for INA Digital Design System.

Installation

npm install @inadigital-ui/vue

Usage

Basic Setup

<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

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

Import All Components

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

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

Components

Button

<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

<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

<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

<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

<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

<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

<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

<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

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

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

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

Development

# 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