diag-shared-business-components

A standalone Vue 3 component library for diagnostic business components with auto-injected styles.

Features

• 🎨 Standalone CSS - No need to manually import CSS files
• 🌍 Internationalization - Built-in support for Vietnamese and English
• 🧩 Modular - Import only what you need
• 📱 Responsive - Built with Tailwind CSS
• 🔧 TypeScript - Full TypeScript support

Installation

npm install diag-shared-business-components

Usage

Option 1: Use as Vue Plugin (Recommended)

// main.ts
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import diagSharedBusinessComponents from 'diag-shared-business-components';

const i18n = createI18n({
  // your i18n config
});

const app = createApp(App);
app.use(i18n);
app.use(diagSharedBusinessComponents, { i18n }); // CSS auto-injected
app.mount('#app');

Option 2: Import Components Directly

<template>
  <TestResultViewer :test-result="testData" />
</template>

<script setup>
import { TestResultViewer } from 'diag-shared-business-components';
// CSS is automatically included, no manual import needed!

const testData = {
  // your test result data
};
</script>

Option 3: Import Composables

<script setup>
import { useDate } from 'diag-shared-business-components';

const { formatDate, formatMonthYear } = useDate();

const formattedDate = formatDate(new Date());
const monthYear = formatMonthYear(new Date(), 'short');
</script>

Available Exports

Components

• TestResultViewer - Main test result viewer component
• All shared UI components (BButton, BCollapse, BModal, etc.)

Composables

• useDate - Date formatting utilities

Types & Constants

• All TypeScript types and enums used by the components

Locales

• vi - Vietnamese translations
• en - English translations

Migration from Previous Versions

If you're upgrading from a version that required manual CSS imports:

Before:

import diagSharedBusinessComponents from 'diag-shared-business-components';
import 'diag-shared-business-components/style.css'; // ❌ No longer needed

app.use(diagSharedBusinessComponents, { i18n });

After:

import diagSharedBusinessComponents from 'diag-shared-business-components';
// CSS is automatically included! ✅

app.use(diagSharedBusinessComponents, { i18n });