@a-vision-software/vue-input-components 1.3.20 → 1.3.21

package/README.md

@@ -14,148 +14,59 @@ A collection of reusable Vue 3 input components with consistent styling and beha
 
 ## Components
 
-### Text Input
+### [Text Input](docs/components/TextInput.md)
 
-A versatile text input component that supports:
+A versatile text input component that supports icons, validation, and custom styling.
 
-- Icons (Font Awesome or images)
-- Placeholder text
-- Disabled state
-- Custom styling (colors, border radius, padding)
-- Clear button
-- Password toggle
-- Character counter
-- Error messages
+### [File Upload](docs/components/FileUpload.md)
 
-### File Upload
+A file upload component with drag and drop support, file validation, and preview capabilities.
 
-A file upload component with:
+### [Action](docs/components/Action.md)
 
-- Drag and drop support
-- Multiple file selection
-- File type validation
-- File size limits
-- Preview support
-- Custom styling
-- Progress indicator
+A flexible action component that can be used as a button, link, or icon button with various styles.
 
-### Action
+### [Navigation](docs/components/Navigation.md)
 
-A flexible action component that can be used as:
+A navigation component with multiple styles, icons support, and responsive design.
 
-- Button
-- Link
-- Icon button
-- With various styles and states
+### [Dropdown](docs/components/Dropdown.md)
 
-### Navigation
+A dropdown component that supports single/multiple selection, filtering, and custom styling.
 
-A navigation component with:
+### [Checkbox](docs/components/Checkbox.md)
 
-- Multiple styles (tiles, tabs, dropdowns)
-- Icons support
-- Sub-navigation items
-- Custom styling
-- Responsive design
-- Keyboard navigation
-
-### Dropdown
-
-A dropdown component that supports:
-
-- 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 checkbox component with support for single/multiple selection and various presentation modes.
 
 ## Installation
 
 ```bash
-npm install vue-input-components
+npm install @a-vision-software/vue-input-components
 ```
 
-## Usage
+## Quick Start
 
 ```vue
 <template>
-  <TextInput v-model="text" placeholder="Enter text" icon="user" :disabled="false" />
-
-  <FileUpload v-model="files" accept="image/*" :max-size="5 * 1024 * 1024" @upload="handleUpload" />
-
-  <Action type="button" label="Click me" icon="check" @click="handleClick" />
-
-  <Navigation :items="navigationItems" type="tiles" v-model:active-item="activeItem" />
-
-  <Dropdown
-    v-model="selected"
-    :options="options"
-    placeholder="Select an option"
-    icon="house"
-    :multiple="true"
-    :filterable="true"
-  />
+  <TextInput v-model="text" placeholder="Enter text" icon="user" />
+  <FileUpload v-model="files" accept="image/*" />
+  <Action type="button" label="Click me" icon="check" />
+  <Navigation :items="navigationItems" type="tiles" />
+  <Dropdown v-model="selected" :options="options" />
+  <Checkbox v-model="selected" :options="options" />
 </template>
-```
 
-## Props
-
-### Text Input
-
-- `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.)
-
-### File Upload
-
-- `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
-
-### Action
-
-- `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
+<script setup lang="ts">
+import {
+  TextInput,
+  FileUpload,
+  Action,
+  Navigation,
+  Dropdown,
+  Checkbox,
+} from '@a-vision-software/vue-input-components'
+</script>
+```
 
 ## Styling
 

package/dist/src/components/Checkbox.vue.d.ts

@@ -0,0 +1,92 @@
+import { CheckboxProps } from '../types/checkbox';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CheckboxProps>, {
+    multiple: boolean;
+    disabled: boolean;
+    width: string;
+    color: string;
+    hoverColor: string;
+    activeColor: string;
+    disabledColor: string;
+    backgroundColor: string;
+    borderRadius: string;
+    padding: string;
+    icon: string;
+    iconSize: string;
+    required: boolean;
+    error: string;
+    label: string;
+    labelPosition: string;
+    labelAlign: string;
+    labelWidth: string;
+    columns: number;
+    presentation: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => void;
+    changed: () => void;
+    saved: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CheckboxProps>, {
+    multiple: boolean;
+    disabled: boolean;
+    width: string;
+    color: string;
+    hoverColor: string;
+    activeColor: string;
+    disabledColor: string;
+    backgroundColor: string;
+    borderRadius: string;
+    padding: string;
+    icon: string;
+    iconSize: string;
+    required: boolean;
+    error: string;
+    label: string;
+    labelPosition: string;
+    labelAlign: string;
+    labelWidth: string;
+    columns: number;
+    presentation: string;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+    onChanged?: (() => any) | undefined;
+    onSaved?: (() => any) | undefined;
+}>, {
+    error: string;
+    disabled: boolean;
+    icon: string;
+    label: string;
+    color: string;
+    backgroundColor: string;
+    multiple: boolean;
+    width: string;
+    hoverColor: string;
+    activeColor: string;
+    disabledColor: string;
+    borderRadius: string;
+    padding: string;
+    iconSize: "large" | "normal";
+    required: boolean;
+    labelPosition: "top" | "left";
+    labelAlign: "left" | "center" | "right";
+    labelWidth: string;
+    columns: number;
+    presentation: "default" | "minimal";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/src/components/Dropdown.vue.d.ts

@@ -60,9 +60,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     color: string;
     backgroundColor: string;
     multiple: boolean;
-    placeholder: string;
-    filterable: boolean;
-    maxHeight: string;
     width: string;
     hoverColor: string;
     activeColor: string;
@@ -74,6 +71,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     labelPosition: "top" | "left";
     labelAlign: "left" | "center" | "right";
     labelWidth: string;
+    placeholder: string;
+    filterable: boolean;
+    maxHeight: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/src/components/TextInput.vue.d.ts

@@ -63,12 +63,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     icon: string;
     label: string;
     modelValue: string;
-    placeholder: string;
-    maxHeight: string;
     width: string;
     labelPosition: "top" | "left";
     labelAlign: "left" | "center" | "right";
     labelWidth: string;
+    placeholder: string;
+    maxHeight: string;
     height: string;
     readonly: boolean;
     maxlength: number;

package/dist/src/index.d.ts

@@ -3,6 +3,7 @@ import { default as FileUpload } from './components/FileUpload.vue';
 import { default as Navigation } from './components/Navigation.vue';
 import { default as Action } from './components/Action.vue';
 import { default as Dropdown } from './components/Dropdown.vue';
+import { default as Checkbox } from './components/Checkbox.vue';
 
-export { TextInput, FileUpload, Navigation, Action, Dropdown };
+export { TextInput, FileUpload, Navigation, Action, Dropdown, Checkbox };
 export * from './types';

package/dist/src/types/checkbox.d.ts

@@ -0,0 +1,30 @@
+export interface CheckboxOption {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface CheckboxProps {
+    options: CheckboxOption[];
+    modelValue: string | string[];
+    multiple?: boolean;
+    disabled?: boolean;
+    width?: string;
+    color?: string;
+    hoverColor?: string;
+    activeColor?: string;
+    disabledColor?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    padding?: string;
+    icon?: string;
+    iconSize?: 'normal' | 'large';
+    error?: string;
+    required?: boolean;
+    autosave?: (value: string | string[]) => Promise<void>;
+    label?: string;
+    labelPosition?: 'top' | 'left';
+    labelAlign?: 'left' | 'center' | 'right';
+    labelWidth?: string;
+    columns?: number;
+    presentation?: 'default' | 'minimal';
+}

package/dist/src/types/index.d.ts

@@ -6,3 +6,4 @@ export * from './fileupload';
 export * from './action';
 export * from './navigation';
 export * from './dropdown';
+export * from './checkbox';

package/dist/src/types/textinput.d.ts

@@ -1,24 +1,24 @@
 export interface TextInputProps {
     modelValue: string;
+    required?: boolean;
     type?: 'text' | 'textarea' | 'password' | 'email' | 'tel' | 'url' | 'date' | 'number';
     placeholder?: string;
     label?: string;
+    labelPosition?: 'top' | 'left';
+    labelAlign?: 'left' | 'center' | 'right';
+    labelWidth?: string;
+    width?: string;
     icon?: string;
     disabled?: boolean;
     readonly?: boolean;
     maxlength?: number;
-    error?: string;
     min?: Date | string;
     max?: Date | string;
-    autosave?: (value: string) => Promise<void>;
-    labelPosition?: 'top' | 'left';
-    labelAlign?: 'left' | 'center' | 'right';
-    labelWidth?: string;
     height?: string;
     maxHeight?: string;
     bgColor?: string;
-    width?: string;
-    required?: boolean;
+    autosave?: (value: string) => Promise<void>;
+    error?: string;
 }
 export interface TextInputEmits {
     (e: 'update:modelValue', value: string): void;