@a-vision-software/vue-input-components 1.2.12 → 1.2.14

package/README.md

@@ -1,6 +1,6 @@
 # Vue Input Components
 
-A collection of reusable Vue 3 input components with TypeScript support, designed for modern web applications.
+A collection of reusable Vue 3 input components with consistent styling and behavior.
 
 ## Features
 
@@ -12,142 +12,161 @@ A collection of reusable Vue 3 input components with TypeScript support, designe
 - 🔍 Accessible by default
 - 📱 Responsive and mobile-friendly
 
-## Installation
+## Components
 
-```bash
-npm install @a-vision-software/vue-input-components
-```
+### Text Input
 
-## Usage
+A versatile text input component that supports:
 
-### Import Styles
+- Icons (Font Awesome or images)
+- Placeholder text
+- Disabled state
+- Custom styling (colors, border radius, padding)
+- Clear button
+- Password toggle
+- Character counter
+- Error messages
 
-```typescript
-import '@a-vision-software/vue-input-components/styles.css'
-```
+### File Upload
 
-### Import Components
+A file upload component with:
 
-```typescript
-import { TextInput, FileUpload, Action } from '@a-vision-software/vue-input-components'
-```
+- Drag and drop support
+- Multiple file selection
+- File type validation
+- File size limits
+- Preview support
+- Custom styling
+- Progress indicator
 
-## Components
+### Action
 
-### TextInput
+A flexible action component that can be used as:
 
-A versatile text input component with validation and error handling.
+- Button
+- Link
+- Icon button
+- With various styles and states
 
-```vue
-<template>
-  <TextInput
-    v-model="value"
-    label="Username"
-    placeholder="Enter your username"
-    :error="error"
-    :disabled="false"
-  />
-</template>
+### Navigation
 
-<script setup lang="ts">
-import { ref } from 'vue'
-import { TextInput } from '@a-vision-software/vue-input-components'
+A navigation component with:
 
-const value = ref('')
-const error = ref('')
-</script>
-```
+- Multiple styles (tiles, tabs, dropdowns)
+- Icons support
+- Sub-navigation items
+- Custom styling
+- Responsive design
+- Keyboard navigation
 
-#### Props
+### Dropdown
 
-| Prop          | Type                                                            | Default  | Description                   |
-| ------------- | --------------------------------------------------------------- | -------- | ----------------------------- |
-| `modelValue`  | `string`                                                        | `''`     | The input value               |
-| `label`       | `string`                                                        | `''`     | The input label               |
-| `placeholder` | `string`                                                        | `''`     | The input placeholder         |
-| `error`       | `string`                                                        | `''`     | Error message to display      |
-| `disabled`    | `boolean`                                                       | `false`  | Whether the input is disabled |
-| `required`    | `boolean`                                                       | `false`  | Whether the input is required |
-| `type`        | `'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'url'` | `'text'` | The input type                |
+A dropdown component that supports:
 
-### FileUpload
+- Single and multiple selection
+- Icons (Font Awesome or images)
+- Placeholder text
+- Filtering of options
+- Disabled state
+- Custom styling (colors, border radius, padding)
+- Clear selection button
+- Tags for multiple selection
+- Responsive design
 
-A file upload component with drag-and-drop support and file type validation.
+## Installation
+
+```bash
+npm install vue-input-components
+```
+
+## Usage
 
 ```vue
 <template>
-  <FileUpload
-    v-model="files"
-    accept="image/*"
-    :multiple="true"
-    :max-size="5 * 1024 * 1024"
-    @error="handleError"
-  />
-</template>
+  <TextInput v-model="text" placeholder="Enter text" icon="user" :disabled="false" />
 
-<script setup lang="ts">
-import { ref } from 'vue'
-import { FileUpload } from '@a-vision-software/vue-input-components'
+  <FileUpload v-model="files" accept="image/*" :max-size="5 * 1024 * 1024" @upload="handleUpload" />
 
-const files = ref<File[]>([])
+  <Action type="button" label="Click me" icon="check" @click="handleClick" />
 
-const handleError = (error: string) => {
-  console.error(error)
-}
-</script>
-```
-
-#### Props
+  <Navigation :items="navigationItems" type="tiles" v-model:active-item="activeItem" />
 
-| Prop         | Type      | Default           | Description                            |
-| ------------ | --------- | ----------------- | -------------------------------------- |
-| `modelValue` | `File[]`  | `[]`              | The selected files                     |
-| `accept`     | `string`  | `'*'`             | Accepted file types                    |
-| `multiple`   | `boolean` | `false`           | Whether multiple files can be selected |
-| `max-size`   | `number`  | `5 * 1024 * 1024` | Maximum file size in bytes             |
-| `disabled`   | `boolean` | `false`           | Whether the upload is disabled         |
+  <Dropdown
+    v-model="selected"
+    :options="options"
+    placeholder="Select an option"
+    icon="house"
+    :multiple="true"
+    :filterable="true"
+  />
+</template>
+```
 
-### Action
+## Props
 
-A versatile action component that can be used as a button or link with customizable colors and icons.
+### Text Input
 
-```vue
-<template>
-  <Action icon="save" label="Save Changes" :color="'#4CAF50'" @click="handleSave" />
-</template>
+- `modelValue`: string - The input value
+- `placeholder`: string - Placeholder text
+- `icon`: string - Icon name or image URL (prefixed with 'img:')
+- `iconSize`: 'normal' | 'large' - Icon size
+- `disabled`: boolean - Whether the input is disabled
+- `type`: 'text' | 'password' | 'email' | 'number' - Input type
+- `showClear`: boolean - Whether to show the clear button
+- `showCounter`: boolean - Whether to show the character counter
+- `maxLength`: number - Maximum length of the input
+- `error`: string - Error message to display
+- Custom styling props (color, hoverColor, etc.)
 
-<script setup lang="ts">
-import { Action } from '@a-vision-software/vue-input-components'
+### File Upload
 
-const handleSave = () => {
-  console.log('Saving changes...')
-}
-</script>
-```
+- `modelValue`: File[] - The selected files
+- `accept`: string - Accepted file types
+- `maxSize`: number - Maximum file size in bytes
+- `multiple`: boolean - Whether to allow multiple files
+- `disabled`: boolean - Whether the upload is disabled
+- Custom styling props
 
-#### Props
+### Action
 
-| Prop       | Type                              | Default     | Description                    |
-| ---------- | --------------------------------- | ----------- | ------------------------------ |
-| `icon`     | `string`                          | `''`        | Font Awesome icon name         |
-| `label`    | `string`                          | `''`        | Action label text              |
-| `color`    | `string`                          | `'#4CAF50'` | Custom color for the action    |
-| `disabled` | `boolean`                         | `false`     | Whether the action is disabled |
-| `href`     | `string`                          | `''`        | URL for link actions           |
-| `type`     | `'button' \| 'submit' \| 'reset'` | `'button'`  | Button type                    |
+- `type`: 'button' | 'link' - The type of action
+- `label`: string - The action label
+- `icon`: string - Icon name
+- `to`: string - Route for link type
+- `disabled`: boolean - Whether the action is disabled
+- Custom styling props
+
+### Navigation
+
+- `items`: NavigationItem[] - The navigation items
+- `type`: 'tiles' | 'tabs' | 'dropdowns' - The navigation style
+- `orientation`: 'horizontal' | 'vertical' - The navigation orientation
+- `activeItem`: string - The active item ID
+- `iconSize`: 'normal' | 'large' - Icon size
+- Custom styling props
+
+### Dropdown
+
+- `modelValue`: string | string[] - The selected value(s)
+- `options`: DropdownOption[] - The available options
+- `placeholder`: string - Placeholder text
+- `icon`: string - Icon name or image URL (prefixed with 'img:')
+- `iconSize`: 'normal' | 'large' - Icon size
+- `multiple`: boolean - Whether to allow multiple selection
+- `filterable`: boolean - Whether to allow filtering
+- `disabled`: boolean - Whether the dropdown is disabled
+- Custom styling props
 
 ## Styling
 
-The components use CSS variables for easy customization. You can override these variables in your application:
+All components support custom styling through CSS variables and props:
 
 ```css
 :root {
-  --primary-color: #4caf50;
-  --text-primary: #333;
-  --text-secondary: #666;
-  --border-color: #ddd;
-  --input-bg: #fff;
-  --error-color: #f44336;
+  --primary: #4a90e2;
+  --text-primary: rgba(0, 0, 0, 0.8);
+  --text-secondary: rgba(0, 0, 0, 0.6);
+  --text-disabled: rgba(0, 0, 0, 0.4);
 }
 ```
 
@@ -171,4 +190,4 @@ npm run test
 
 ## License
 
-MIT © [A-Vision Software](https://github.com/a-vision)
+MIT

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import { default as Action } from './components/Action';
 import { Component } from 'vue';
+import { default as Dropdown } from './components/Dropdown';
 import { default as FileUpload } from './components/FileUpload';
 import { default as Navigation } from './components/Navigation';
 import { default as TextInput } from './components/TextInput';
@@ -22,6 +23,8 @@ export declare interface ActionProps {
     variant?: 'solid' | 'transparent';
 }
 
+export { Dropdown }
+
 export { FileUpload }
 
 export declare type FileUploadComponent = Component<FileUploadProps>;