@idds/vue 1.6.14 → 1.6.16

package/README.md

@@ -225,19 +225,36 @@ const currentMode = getThemeMode();
 ### Toast Notifications
 
 ```vue
+<!-- Root Component (e.g. App.vue) -->
 <template>
   <ToastProvider>
-    <App />
+    <router-view />
   </ToastProvider>
 </template>
 
 <script setup>
-import { ToastProvider, useToast } from '@idds/vue';
+import { ToastProvider } from '@idds/vue';
+</script>
+```
 
-const toast = useToast();
+```vue
+<!-- Child Component -->
+<template>
+  <Button @click="handleShowToast">Show Toast</Button>
+</template>
 
-const showSuccess = () => {
-  toast.success('Operation completed successfully!');
+<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>
 ```
@@ -245,24 +262,40 @@ const showSuccess = () => {
 ### Confirmation Dialog
 
 ```vue
+<!-- Root Component -->
 <template>
   <ConfirmationProvider>
-    <App />
+    <router-view />
   </ConfirmationProvider>
 </template>
 
 <script setup>
-import { ConfirmationProvider, useConfirmation } from '@idds/vue';
+import { ConfirmationProvider } from '@idds/vue';
+</script>
+```
 
-const confirm = useConfirmation();
+```vue
+<!-- 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 result = await confirm({
-    title: 'Delete Item',
-    message: 'Are you sure you want to delete this item?',
+  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 (result) {
-    // User confirmed
+
+  if (isConfirmed) {
+    console.log('User confirmed deletion');
   }
 };
 </script>
@@ -279,7 +312,7 @@ import {
   encodeHtmlEntities,
   decodeHtmlEntities,
   sanitizeFileName,
-  containsDangerousPatterns
+  containsDangerousPatterns,
 } from '@idds/vue';
 
 // Sanitize user input
@@ -295,7 +328,11 @@ if (!validation.isValid) {
 ### File Validation
 
 ```js
-import { validateFile, validateFileMagicNumber, formatFileSize } from '@idds/vue';
+import {
+  validateFile,
+  validateFileMagicNumber,
+  formatFileSize,
+} from '@idds/vue';
 
 // Validate file
 const result = validateFile(file, {
@@ -308,6 +345,7 @@ 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