@idds/vue

Vue 3 UI component library for INA Digital Design System.

This package provides a comprehensive set of Vue 3 components built with TypeScript. All styles are managed centrally in @idds/styles package and are not dependent on Tailwind CSS classes. Components use pure CSS with BEM-like naming conventions.

Installation

npm install @idds/vue

Peer Dependencies

npm install vue@^3.4.0

Quick Start

1. Import CSS

Import the styles in your application entry point:

// src/main.js or src/main.ts
import '@idds/vue/index.css';

2. Import and Use Components

<template>
  <div>
    <Button variant="primary" size="md" @click="handleClick"> Click me </Button>
    <TextField v-model="value" label="Email" placeholder="Enter your email" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Button, TextField } from '@idds/vue';

const value = ref('');
const handleClick = () => {
  console.log('Button clicked');
};
</script>

Usage

Import Individual Components

<script setup>
import { Button, TextField, SelectDropdown, Modal } from '@idds/vue';
</script>

Import All Components

<script setup>
import InaDigitalUI from '@idds/vue';

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

Import Color Tokens (Optional - for Tailwind CSS integration)

If you want to use INA Digital color tokens with Tailwind CSS in your project:

Tailwind CSS v3

For Tailwind CSS v3, import the TypeScript token files:

// tailwind.config.js
import iddsColorTokens from '@idds/vue';
import bgnColorTokens from '@idds/vue'; // Brand-specific tokens

export default {
  theme: {
    extend: {
      colors: {
        ...iddsColorTokens,
        ...bgnColorTokens,
      },
    },
  },
};

Tailwind CSS v4

For Tailwind CSS v4, import the CSS theme files directly in your main CSS file:

/* src/index.css or your main CSS file */

/* Tailwind CSS v4 */
@import 'tailwindcss';

/* INA Digital color tokens */
@import '@idds/styles/tailwind/css/idds.css';
@import '@idds/styles/tailwind/css/bgn.css'; /* Optional: brand theme */

Or use minified versions for production:

@import 'tailwindcss';
@import '@idds/styles/tailwind/css/idds.min.css';
@import '@idds/styles/tailwind/css/bgn.min.css';

Available Components

Form Components

• TextField - Text input with validation, clear button, and character count
• TextArea - Multi-line text input with autosize
• PasswordInput - Password input with show/hide toggle
• SelectDropdown - Dropdown select with search and multi-select support
• Checkbox - Checkbox input
• RadioInput - Radio button input
• DatePicker - Date picker with single, range, and multiple modes
• TimePicker - Time picker
• YearPicker - Year picker
• MonthPicker - Month picker
• PhoneInput - Phone number input with country selector
• OneTimePassword - OTP input component
• FileUpload - File upload with drag & drop and validation
• SingleFileUpload - Single file upload component
• Toggle - Toggle switch component

Layout Components

• Card - Card container component
• Accordion - Collapsible accordion component
• AccordionCard - Accordion with card styling
• AccordionGroup - Group of accordions
• Divider - Horizontal or vertical divider
• Stepper - Step indicator component
• Breadcrumb - Breadcrumb navigation
• TabHorizontal - Horizontal tabs
• TabVertical - Vertical tabs

Feedback Components

• Alert - Alert message component
• Toast - Toast notification (use with ToastProvider)
• ToastProvider - Provider for toast notifications
• Modal - Modal dialog component
• Drawer - Side drawer component
• BottomSheet - Bottom sheet component
• Tooltip - Tooltip component
• Skeleton - Loading skeleton component
• Spinner - Loading spinner component
• ProgressBar - Progress bar component
• LinearProgressIndicator - Linear progress indicator
• TableProgressBar - Progress bar for tables

Data Display Components

• Table - Advanced table with sorting, pagination, and editing
• FieldInputTable - Table with inline input fields
• MultipleChoiceGrid - Grid for multiple choice questions
• Avatar - Avatar component
• Badge - Badge component
• Chip - Chip component

Navigation Components

• Button - Button component with multiple variants
• ButtonGroup - Group of buttons
• ActionDropdown - Dropdown menu for actions
• Dropdown - General dropdown component
• Pagination - Pagination component
• InputSearch - Search input component

Other Components

• ThemeToggle - Dark/light theme toggle
• Collapse - Collapsible content component

Theme System

Setting Brand Theme

The design system supports multiple brand themes. You can switch between them programmatically:

import { setBrandTheme } from '@idds/vue';

// Set brand theme
setBrandTheme('bgn'); // or 'inagov', 'inaku', 'inapas', 'bkn', 'lan', 'panrb'

// Use default theme
setBrandTheme('default');

Theme Mode (Light/Dark)

You can globally set or toggle the theme mode between light and dark:

import { setThemeMode, toggleThemeMode, getThemeMode } from '@idds/vue';

// Set specific mode
setThemeMode('dark'); // or 'light'

// Toggle current mode
toggleThemeMode();

// Get current mode
const currentMode = getThemeMode();

Composables

Toast Notifications

<!-- Root Component (e.g. App.vue) -->
<template>
  <ToastProvider>
    <router-view />
  </ToastProvider>
</template>

<script setup>
import { ToastProvider } from '@idds/vue';
</script>

<!-- Child Component -->
<template>
  <Button @click="handleShowToast">Show Toast</Button>
</template>

<script setup>
import { useToast, Button } from '@idds/vue';

const { toast } = useToast();

const handleShowToast = () => {
  toast({
    state: 'positive',
    title: 'Berhasil',
    description: 'Data berhasil disimpan',
    duration: 3000,
  });
};
</script>

Confirmation Dialog

<!-- Root Component -->
<template>
  <ConfirmationProvider>
    <router-view />
  </ConfirmationProvider>
</template>

<script setup>
import { ConfirmationProvider } from '@idds/vue';
</script>

<!-- Child Component -->
<template>
  <Button @click="handleDelete" variant="error">Hapus Item</Button>
</template>

<script setup>
import { useConfirmation, Button } from '@idds/vue';

const { confirm } = useConfirmation();

const handleDelete = async () => {
  const isConfirmed = await confirm({
    title: 'Hapus Data?',
    message: 'Apakah Anda yakin ingin menghapus data ini?',
    confirmText: 'Hapus',
    cancelText: 'Batal',
    confirmClassName: 'bg-red-600 hover:bg-red-700 text-white',
  });

  if (isConfirmed) {
    console.log('User confirmed deletion');
  }
};
</script>

Utilities

Security Utilities

import {
  sanitizeInput,
  validateInput,
  encodeHtmlEntities,
  decodeHtmlEntities,
  sanitizeFileName,
  containsDangerousPatterns,
} from '@idds/vue';

// Sanitize user input
const sanitized = sanitizeInput(userInput);

// Validate input for XSS
const validation = validateInput(userInput);
if (!validation.isValid) {
  console.warn('Security threat detected:', validation.threats);
}

File Validation

import {
  validateFile,
  validateFileMagicNumber,
  formatFileSize,
} from '@idds/vue';

// Validate file
const result = validateFile(file, {
  allowedTypes: 'image/*',
  maxSize: 5 * 1024 * 1024, // 5MB
});

// Format file size
const formatted = formatFileSize(1024 * 1024); // "1 MB"

Styling

Components use BEM-like naming conventions (e.g., ina-button, ina-button--primary). The @idds/styles package serves all necessary core styles. Tailwind integration is completely optional.

TypeScript Support

All components are fully typed with TypeScript, exporting interfaces for Props and their related strict Types:

<script setup lang="ts">
import { TextField, type TextFieldProps, type TextFieldSize } from '@idds/vue';

const props: TextFieldProps = {
  modelValue: '',
  label: 'Email',
};
</script>

License

MIT