@idds/vue 1.6.12 → 1.6.14

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
-
-You can also set a custom theme:
-
-```js
-import { setCustomTheme } from '@idds/vue';
-
-setCustomTheme({
-  name: 'custom',
-  colors: {
-    primary500: '#0968f6',
-    primary600: '#0754c4',
-    // ... other color tokens
-  },
-});
-```
+### Theme Mode (Light/Dark)
 
-### Theme Utilities
+You can globally set or toggle the theme mode between light and dark:
 
 ```js
-import {
-  getCurrentTheme,
-  getAvailableBrands,
-  resetTheme,
-  isValidBrand,
-} from '@idds/vue';
+import { setThemeMode, toggleThemeMode, getThemeMode } from '@idds/vue';
 
-// Get current active theme
-const currentTheme = getCurrentTheme();
+// Set specific mode
+setThemeMode('dark'); // or 'light'
 
-// 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
@@ -300,10 +239,6 @@ const toast = useToast();
 const showSuccess = () => {
   toast.success('Operation completed successfully!');
 };
-
-const showError = () => {
-  toast.error('An error occurred');
-};
 </script>
 ```
 
@@ -326,7 +261,6 @@ const handleDelete = async () => {
     title: 'Delete Item',
     message: 'Are you sure you want to delete this item?',
   });
-
   if (result) {
     // User confirmed
   }
@@ -334,123 +268,6 @@ const handleDelete = async () => {
 </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
-
-```vue
-<template>
-  <SelectDropdown
-    v-model="selected"
-    :options="options"
-    label="Select Option"
-    placeholder="Choose an option"
-    :searchable="true"
-    :clearable="true"
-  />
-</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' },
-];
-</script>
-```
-
-### DatePicker
-
-```vue
-<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"
-  />
-</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>
-
-<script setup>
-import { Table } from '@idds/vue';
-
-const columns = [
-  { key: 'name', label: 'Name' },
-  { key: 'email', label: 'Email' },
-];
-
-const data = [
-  { id: 1, name: 'John', email: 'john@example.com' },
-  { id: 2, name: 'Jane', email: 'jane@example.com' },
-];
-</script>
-```
-
 ## Utilities
 
 ### Security Utilities
@@ -461,6 +278,8 @@ import {
   validateInput,
   encodeHtmlEntities,
   decodeHtmlEntities,
+  sanitizeFileName,
+  containsDangerousPatterns
 } from '@idds/vue';
 
 // Sanitize user input
@@ -476,7 +295,7 @@ 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 +303,20 @@ 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;
-}
-```
-
-### 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.
+### 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:
+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 +325,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