@idds/vue 1.6.13 → 1.6.15

package/README.md

@@ -117,28 +117,6 @@ Or use minified versions for production:
 @import '@idds/styles/tailwind/css/bgn.min.css';
 ```
 
-Then you can use Tailwind utility classes with INA Digital colors:
-
-```vue
-<template>
-  <div class="bg-blue-500 text-white p-4">
-    <p class="text-guide-500">This text uses guide-500 color</p>
-    <p class="text-neutral-500">This text uses neutral-500 color</p>
-  </div>
-</template>
-```
-
-**Available brand theme files:**
-
-- `@idds/styles/tailwind/css/idds.css` - Default theme
-- `@idds/styles/tailwind/css/inagov.css` - INAGov brand
-- `@idds/styles/tailwind/css/inaku.css` - INAKu brand
-- `@idds/styles/tailwind/css/inapas.css` - INAPas brand
-- `@idds/styles/tailwind/css/bgn.css` - BGN brand
-- `@idds/styles/tailwind/css/bkn.css` - BKN brand
-- `@idds/styles/tailwind/css/lan.css` - LAN brand
-- `@idds/styles/tailwind/css/panrb.css` - panrb brand
-
 ## Available Components
 
 ### Form Components
@@ -223,62 +201,23 @@ setBrandTheme('bgn'); // or 'inagov', 'inaku', 'inapas', 'bkn', 'lan', 'panrb'
 
 // Use default theme
 setBrandTheme('default');
-
-// Remove brand theme (use default)
-setBrandTheme(null);
 ```
 
-### Available Brand Themes
-
-- `'default'` - Default INA Digital theme
-- `'inagov'` - INAGov brand theme
-- `'inaku'` - INAKu brand theme
-- `'inapas'` - INAPas brand theme
-- `'bgn'` - BGN brand theme
-- `'bkn'` - BKN brand theme
-- `'lan'` - LAN brand theme
-- `'panrb'` - panrb brand theme
-
-### Custom Theme
+### Theme Mode (Light/Dark)
 
-You can also set a custom theme:
+You can globally set or toggle the theme mode between light and dark:
 
 ```js
-import { setCustomTheme } from '@idds/vue';
-
-setCustomTheme({
-  name: 'custom',
-  colors: {
-    primary500: '#0968f6',
-    primary600: '#0754c4',
-    // ... other color tokens
-  },
-});
-```
+import { setThemeMode, toggleThemeMode, getThemeMode } from '@idds/vue';
 
-### Theme Utilities
+// Set specific mode
+setThemeMode('dark'); // or 'light'
 
-```js
-import {
-  getCurrentTheme,
-  getAvailableBrands,
-  resetTheme,
-  isValidBrand,
-} from '@idds/vue';
-
-// Get current active theme
-const currentTheme = getCurrentTheme();
-
-// Get available brand names
-const brands = getAvailableBrands();
+// Toggle current mode
+toggleThemeMode();
 
-// Reset to default theme
-resetTheme();
-
-// Validate brand name
-if (isValidBrand('bgn')) {
-  setBrandTheme('bgn');
-}
+// Get current mode
+const currentMode = getThemeMode();
 ```
 
 ## Composables
@@ -286,168 +225,79 @@ if (isValidBrand('bgn')) {
 ### Toast Notifications
 
 ```vue
+<!-- Root Component (e.g. App.vue) -->
 <template>
   <ToastProvider>
-    <App />
+    <router-view />
   </ToastProvider>
 </template>
 
 <script setup>
-import { ToastProvider, useToast } from '@idds/vue';
-
-const toast = useToast();
-
-const showSuccess = () => {
-  toast.success('Operation completed successfully!');
-};
-
-const showError = () => {
-  toast.error('An error occurred');
-};
+import { ToastProvider } from '@idds/vue';
 </script>
 ```
 
-### Confirmation Dialog
-
 ```vue
+<!-- Child Component -->
 <template>
-  <ConfirmationProvider>
-    <App />
-  </ConfirmationProvider>
+  <Button @click="handleShowToast">Show Toast</Button>
 </template>
 
 <script setup>
-import { ConfirmationProvider, useConfirmation } from '@idds/vue';
+import { useToast, Button } from '@idds/vue';
 
-const confirm = useConfirmation();
+const { toast } = useToast();
 
-const handleDelete = async () => {
-  const result = await confirm({
-    title: 'Delete Item',
-    message: 'Are you sure you want to delete this item?',
+const handleShowToast = () => {
+  toast({
+    state: 'positive',
+    title: 'Berhasil',
+    description: 'Data berhasil disimpan',
+    duration: 3000,
   });
-
-  if (result) {
-    // User confirmed
-  }
-};
-</script>
-```
-
-## Component Examples
-
-### TextField
-
-```vue
-<template>
-  <TextField
-    v-model="email"
-    label="Email"
-    placeholder="Enter your email"
-    type="email"
-    :required="true"
-    :show-clear-button="true"
-    :max-length="100"
-    :show-char-count="true"
-    @input="handleInput"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { TextField } from '@idds/vue';
-
-const email = ref('');
-const handleInput = (event) => {
-  console.log('Input event:', event);
 };
 </script>
 ```
 
-### Button
-
-```vue
-<template>
-  <Button variant="primary" size="md" @click="handleClick"> Submit </Button>
-</template>
-
-<script setup>
-import { Button } from '@idds/vue';
-
-const handleClick = () => {
-  console.log('Button clicked');
-};
-</script>
-```
-
-### SelectDropdown
+### Confirmation Dialog
 
 ```vue
+<!-- Root Component -->
 <template>
-  <SelectDropdown
-    v-model="selected"
-    :options="options"
-    label="Select Option"
-    placeholder="Choose an option"
-    :searchable="true"
-    :clearable="true"
-  />
+  <ConfirmationProvider>
+    <router-view />
+  </ConfirmationProvider>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { SelectDropdown } from '@idds/vue';
-
-const selected = ref(null);
-const options = [
-  { value: '1', label: 'Option 1' },
-  { value: '2', label: 'Option 2' },
-];
+import { ConfirmationProvider } from '@idds/vue';
 </script>
 ```
 
-### DatePicker
-
 ```vue
+<!-- Child Component -->
 <template>
-  <DatePicker
-    v-model="date"
-    mode="single"
-    label="Select Date"
-    placeholder="Choose a date"
-    date-format="DD/MM/YYYY"
-    :show-icon="true"
-    :show-clear-button="true"
-  />
+  <Button @click="handleDelete" variant="error">Hapus Item</Button>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { DatePicker } from '@idds/vue';
-
-const date = ref('');
-</script>
-```
-
-### Table
-
-```vue
-<template>
-  <Table :columns="columns" :data="data" />
-</template>
+import { useConfirmation, Button } from '@idds/vue';
 
-<script setup>
-import { Table } from '@idds/vue';
+const { confirm } = useConfirmation();
 
-const columns = [
-  { key: 'name', label: 'Name' },
-  { key: 'email', label: 'Email' },
-];
+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',
+  });
 
-const data = [
-  { id: 1, name: 'John', email: 'john@example.com' },
-  { id: 2, name: 'Jane', email: 'jane@example.com' },
-];
+  if (isConfirmed) {
+    console.log('User confirmed deletion');
+  }
+};
 </script>
 ```
 
@@ -461,6 +311,8 @@ import {
   validateInput,
   encodeHtmlEntities,
   decodeHtmlEntities,
+  sanitizeFileName,
+  containsDangerousPatterns,
 } from '@idds/vue';
 
 // Sanitize user input
@@ -476,7 +328,11 @@ if (!validation.isValid) {
 ### File Validation
 
 ```js
-import { validateFile, validateMagicNumber, formatFileSize } from '@idds/vue';
+import {
+  validateFile,
+  validateFileMagicNumber,
+  formatFileSize,
+} from '@idds/vue';
 
 // Validate file
 const result = validateFile(file, {
@@ -484,75 +340,21 @@ const result = validateFile(file, {
   maxSize: 5 * 1024 * 1024, // 5MB
 });
 
-// Validate magic number (file signature)
-const magicResult = await validateMagicNumber(file, 'image/png');
-
 // Format file size
 const formatted = formatFileSize(1024 * 1024); // "1 MB"
 ```
 
-## Styling
-
-### CSS Classes
-
-Components use BEM-like naming conventions:
-
-- `ina-button` - Base button class
-- `ina-button--primary` - Primary variant
-- `ina-button--disabled` - Disabled state
-- `ina-text-field` - Text field component
-- `ina-text-field__input` - Input element
-- `ina-text-field__label` - Label element
-
-### Custom Styling
-
-You can override component styles using CSS:
-
-```css
-.ina-button--primary {
-  background-color: your-custom-color;
-}
-```
+### Styling
 
-### Using with Tailwind CSS (Optional)
-
-If you want to use Tailwind CSS utility classes alongside the design system:
-
-1. Install Tailwind CSS in your project
-2. Import color tokens:
-
-```js
-// tailwind.config.js
-import iddsColorTokens from '@idds/vue';
-
-export default {
-  theme: {
-    extend: {
-      colors: iddsColorTokens,
-    },
-  },
-};
-```
-
-3. Use Tailwind classes for custom styling:
-
-```vue
-<template>
-  <div class="bg-blue-500 text-white p-4">
-    <Button>Click me</Button>
-  </div>
-</template>
-```
-
-> **Note:** Tailwind CSS is **optional**. The design system works perfectly without it. Components are fully styled and functional using only the included CSS.
+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:
+All components are fully typed with TypeScript, exporting interfaces for Props and their related strict Types:
 
 ```vue
 <script setup lang="ts">
-import { TextField, type TextFieldProps } from '@idds/vue';
+import { TextField, type TextFieldProps, type TextFieldSize } from '@idds/vue';
 
 const props: TextFieldProps = {
   modelValue: '',
@@ -561,25 +363,6 @@ const props: TextFieldProps = {
 </script>
 ```
 
-## Development
-
-```bash
-# 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/vue",
-  "version": "1.6.13",
+  "version": "1.6.15",
   "publishConfig": {
     "access": "public"
   },
@@ -63,7 +63,7 @@
     "vue-tsc": "^2.0.6"
   },
   "dependencies": {
-    "@idds/styles": "^1.6.13",
+    "@idds/styles": "^1.6.15",
     "clsx": "^2.1.1"
   }
 }