@pertamina/design-system-vue

Vue 3 component library untuk PACER (Pertamina Patra Niaga Components & Experience Resources).

Installation

npm install @pertamina/design-system-vue
# or
pnpm add @pertamina/design-system-vue

Setup

1. Import CSS & Install Plugin

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import PertaminaDesignSystem from '@pertamina/design-system-vue';
import '@pertamina/design-system-vue/styles.css';

const app = createApp(App);
app.use(PertaminaDesignSystem);
app.mount('#app');

2. Configure Tailwind (Optional)

Jika project menggunakan Tailwind:

// tailwind.config.js
module.exports = {
  presets: [require('@pertamina/tailwind-preset')],
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './node_modules/@pertamina/design-system-vue/dist/**/*.{js,mjs}',
  ],
};

Usage

Button

<template>
  <div>
    <!-- Basic -->
    <PtButton variant="primary" size="md">
      Primary Button
    </PtButton>
    
    <!-- With loading -->
    <PtButton variant="secondary" :loading="isLoading">
      Loading...
    </PtButton>
    
    <!-- With icons -->
    <PtButton variant="success" @click="handleSave">
      <template #start-icon>
        <CheckIcon />
      </template>
      Save
    </PtButton>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PtButton } from '@pertamina/design-system-vue';

const isLoading = ref(false);

const handleSave = () => {
  console.log('Saved!');
};
</script>

Props:

• variant - 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'ghost' | 'link'
• size - 'sm' | 'md' | 'lg'
• fullWidth - boolean
• loading - boolean
• disabled - boolean

Slots:

• default - Button content
• start-icon - Icon sebelum text
• end-icon - Icon setelah text

Input

<template>
  <div>
    <!-- Basic input -->
    <PtInput
      v-model="email"
      label="Email"
      type="email"
      placeholder="[email protected]"
      helperText="Masukkan email yang terdaftar"
    />
    
    <!-- With error -->
    <PtInput
      v-model="password"
      label="Password"
      type="password"
      :error="passwordError"
    />
    
    <!-- With icon -->
    <PtInput
      v-model="search"
      placeholder="Cari..."
    >
      <template #start-icon>
        <SearchIcon />
      </template>
    </PtInput>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { PtInput } from '@pertamina/design-system-vue';

const email = ref('');
const password = ref('');
const search = ref('');

const passwordError = computed(() => {
  return password.value.length < 8 
    ? 'Password harus minimal 8 karakter' 
    : '';
});
</script>

Props:

• modelValue (v-model) - string | number
• label - string
• error - string
• helperText - string
• type - string
• placeholder - string
• fullWidth - boolean
• disabled - boolean

Slots:

• start-icon - Icon sebelum input
• end-icon - Icon setelah input

Card

<template>
  <PtCard
    variant="elevated"
    padding="lg"
  >
    <template #header>
      <h3 class="text-xl font-bold">Dashboard</h3>
    </template>
    
    <p>Card content goes here...</p>
    
    <template #footer>
      <PtButton variant="primary">View Details</PtButton>
    </template>
  </PtCard>
</template>

<script setup lang="ts">
import { PtCard, PtButton } from '@pertamina/design-system-vue';
</script>

Props:

• variant - 'default' | 'outlined' | 'elevated'
• padding - 'none' | 'sm' | 'md' | 'lg'

Slots:

• default - Card body
• header - Card header
• footer - Card footer

TypeScript

Library ini fully typed. Import types:

import type { ButtonProps, InputProps, CardProps } from '@pertamina/design-system-vue';

Import Individual Components

Alternatif import tanpa plugin:

<script setup lang="ts">
import { PtButton, PtInput, PtCard } from '@pertamina/design-system-vue';
</script>

Composition API

Semua component menggunakan Vue 3 Composition API dengan <script setup>.

Accessibility

Semua component sudah:

• ✅ Keyboard accessible
• ✅ Screen reader friendly
• ✅ ARIA attributes
• ✅ Focus management
• ✅ WCAG 2.1 Level AA compliant

Best Practices

1. v-model - Gunakan v-model untuk two-way binding di Input
2. Slots - Manfaatkan slots untuk customization
3. TypeScript - Enable TypeScript untuk type safety
4. Composition API - Gunakan Composition API untuk logic reuse

Contributing

Lihat CONTRIBUTING.md untuk guidelines.

Support

• Documentation: https://design-system.pertamina.com
• Storybook: https://storybook.pertamina.com/vue
• Issues: https://github.com/prakasajudha/pacer-design-system/issues