@a-vision-software/vue-input-components 1.3.11 → 1.3.13

package/src/views/TextInputTestView.vue

@@ -12,20 +12,19 @@
         <div class="input-group">
           <h2>Account Information</h2>
           <TextInput v-model="username" type="text" icon="user" placeholder="Enter your username" :required="true"
-            :error="usernameError" label="Username" label-position="left" label-align="right" label-width="20%"
-            total-width="100%" />
+            :error="usernameError" label="Username" label-position="left" label-align="right" label-width="20%" />
           <TextInput v-model="password" type="password" icon="lock" placeholder="Enter your password" :required="true"
-            :error="passwordError" label="Password" label-position="left" label-align="right" label-width="20%"
-            total-width="100%" />
+            :error="passwordError" label="Password" label-position="left" label-align="right" label-width="20%" />
         </div>
         <div class="input-group">
           <h2>Additional Information</h2>
-          <TextInput v-model="bio" isTextarea label="Bio" icon="user-circle" placeholder="Tell us about yourself..."
-            :rows="4" :maxLength="500" :error="bioError" :autosave="handleBioAutosave" label-position="top"
-            label-align="left" total-width="100%" height="10rem" max-height="20rem" />
-          <TextInput v-model="feedback" isTextarea label="Feedback" icon="comment" placeholder="Share your thoughts..."
-            :rows="3" :maxLength="1000" :error="feedbackError" :autosave="handleFeedbackAutosave" label-position="left"
-            label-align="left" label-width="auto" total-width="100%" max-height="8rem" />
+          <TextInput v-model="bio" type="textarea" label="Bio" icon="user-circle"
+            placeholder="Tell us about yourself..." :rows="4" :maxLength="500" :error="bioError"
+            :autosave="handleBioAutosave" label-position="top" label-align="left" height="10rem" max-height="20rem" />
+          <TextInput v-model="feedback" type="textarea" label="Feedback" icon="comment"
+            placeholder="Share your thoughts..." :rows="3" :maxLength="1000" :error="feedbackError"
+            :autosave="handleFeedbackAutosave" label-position="left" label-align="left" label-width="auto"
+            max-height="8rem" />
         </div>
       </div>
       <div class="column">
@@ -33,23 +32,22 @@
           <h2>Address Information</h2>
           <TextInput v-model="street" label="Street Address" type="text" icon="road"
             placeholder="Enter your street address" :error="streetError" :autosave="handleStreetAutosave"
-            label-position="top" label-align="left" total-width="100%" />
+            label-position="top" label-align="left" />
           <div class="address-row">
             <TextInput v-model="city" label="City" type="text" icon="building" placeholder="Enter your city"
               :error="cityError" :autosave="handleCityAutosave" label-position="top" label-align="left"
               total-width="calc(100% - 11rem)" />
             <TextInput v-model="postalCode" label="Postal Code" type="text" icon="fas fa-hashtag" placeholder="1234AB"
               :error="postalCodeError" @update:modelValue="handlePostalCodeInput" :autosave="handlePostalCodeAutosave"
-              label-position="top" label-align="left" total-width="10rem" />
+              label-position="top" label-align="left" width="10rem" />
           </div>
           <TextInput v-model="country" label="Country" type="text" icon="flag" placeholder="Enter your country"
-            :error="countryError" :autosave="handleCountryAutosave" label-position="top" label-align="left"
-            total-width="100%" />
+            :error="countryError" :autosave="handleCountryAutosave" label-position="top" label-align="left" />
           <TextInput v-model="birthDate" type="date" label="Date of Birth" icon="calendar" placeholder="DD/MM/YYYY"
             :min="minDate" :max="maxDate" :error="birthDateError" :autosave="handleBirthDateAutosave"
             label-position="top" label-align="left" />
           <TextInput v-model="comment" label="Comment" type="text" placeholder="Your comment" label-position="top"
-            label-align="left" total-width="100%" />
+            label-align="left" />
         </div>
       </div>
     </div>

package/dist/types.d.ts

@@ -1,126 +0,0 @@
-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';
-
-export { Action }
-
-export declare type ActionComponent = {
-    focus: () => void;
-    blur: () => void;
-};
-
-export declare interface ActionProps {
-    icon?: string;
-    label?: string;
-    href?: string;
-    type?: 'button' | 'submit' | 'reset';
-    disabled?: boolean;
-    color?: string;
-    size?: 'small' | 'regular' | 'large';
-    variant?: 'solid' | 'transparent';
-}
-
-export { Dropdown }
-
-export { FileUpload }
-
-export declare type FileUploadComponent = Component<FileUploadProps>;
-
-export declare interface FileUploadEmits {
-    (e: 'update:modelValue', files: File[]): void;
-    (e: 'files-selected', files: File[]): void;
-    (e: 'start-upload', files: File[]): void;
-    (e: 'upload-progress', progress: number): void;
-    (e: 'upload-success', response: any): void;
-    (e: 'upload-error', error: Error): void;
-}
-
-export declare interface FileUploadProps {
-    modelValue: File[];
-    label?: string;
-    placeholder?: string;
-    error?: string;
-    disabled?: boolean;
-    required?: boolean;
-    multiple?: boolean;
-    accept?: string;
-    maxSize?: number;
-    uploadUrl?: string;
-}
-
-export { Navigation }
-
-export declare interface NavigationComponent {
-    props: NavigationProps;
-    emits: {
-        (e: 'item-click', item: NavigationItem): void;
-        (e: 'update:activeItem', id: string): void;
-    };
-}
-
-export declare interface NavigationItem {
-    id: string;
-    label: string;
-    icon?: string;
-    url?: string;
-    children?: NavigationItem[];
-    type?: 'tile' | 'tab' | 'dropdown';
-    color?: string;
-    disabled?: boolean;
-    alignment?: 'start' | 'end';
-}
-
-export declare interface NavigationProps {
-    items: NavigationItem[];
-    type?: 'tiles' | 'tabs' | 'dropdowns';
-    orientation?: 'horizontal' | 'vertical';
-    activeItem?: string;
-    color?: string;
-    hoverColor?: string;
-    activeColor?: string;
-    disabledColor?: string;
-    iconSize?: string;
-    gap?: string;
-    padding?: string;
-    borderRadius?: string;
-    showIcons?: boolean;
-    activeItemAlignment?: 'start' | 'end';
-}
-
-export { TextInput }
-
-export declare type TextInputComponent = {
-    focus: () => void;
-    blur: () => void;
-};
-
-export declare interface TextInputProps {
-    modelValue: string;
-    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'date';
-    label?: string;
-    placeholder?: string;
-    icon?: string;
-    disabled?: boolean;
-    readonly?: boolean;
-    maxlength?: number;
-    error?: string;
-    min?: string;
-    max?: string;
-    required?: boolean;
-    success?: string;
-    labelPosition?: 'top' | 'left';
-    labelAlign?: 'left' | 'right' | 'center';
-    totalWidth?: string;
-    inputWidth?: string;
-    labelWidth?: string;
-    autosave?: (value: string) => Promise<void>;
-    isTextarea?: boolean;
-    maxHeight?: string;
-    height?: string;
-    bgColor?: string;
-}
-
-export { }

package/src/types.d.ts

@@ -1,23 +0,0 @@
-declare module '@a-vision-software/vue-input-components' {
-  import { DefineComponent } from 'vue'
-
-  export const TextInput: DefineComponent<{
-    modelValue?: string
-    label?: string
-    placeholder?: string
-    required?: boolean
-    disabled?: boolean
-    error?: string
-  }>
-
-  export const FileUpload: DefineComponent<{
-    modelValue?: File[]
-    maxFiles?: number
-    maxFileSize?: number
-    accept?: string
-    uploadUrl?: string
-    required?: boolean
-    disabled?: boolean
-    error?: string
-  }>
-}

package/src/types.ts

@@ -1,109 +0,0 @@
-import type { Component } from 'vue'
-
-export interface TextInputProps {
-  modelValue: string
-  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'date'
-  label?: string
-  placeholder?: string
-  icon?: string
-  disabled?: boolean
-  readonly?: boolean
-  maxlength?: number
-  error?: string
-  min?: string
-  max?: string
-  required?: boolean
-  success?: string
-  labelPosition?: 'top' | 'left'
-  labelAlign?: 'left' | 'right' | 'center'
-  totalWidth?: string
-  inputWidth?: string
-  labelWidth?: string
-  autosave?: (value: string) => Promise<void>
-  isTextarea?: boolean
-  maxHeight?: string
-  height?: string
-  bgColor?: string
-}
-
-export interface FileUploadProps {
-  modelValue: File[]
-  label?: string
-  placeholder?: string
-  error?: string
-  disabled?: boolean
-  required?: boolean
-  multiple?: boolean
-  accept?: string
-  maxSize?: number
-  uploadUrl?: string
-}
-
-export interface FileUploadEmits {
-  (e: 'update:modelValue', files: File[]): void
-  (e: 'files-selected', files: File[]): void
-  (e: 'start-upload', files: File[]): void
-  (e: 'upload-progress', progress: number): void
-  (e: 'upload-success', response: any): void
-  (e: 'upload-error', error: Error): void
-}
-
-export type TextInputComponent = {
-  focus: () => void
-  blur: () => void
-}
-
-export type FileUploadComponent = Component<FileUploadProps>
-
-export interface ActionProps {
-  icon?: string
-  label?: string
-  href?: string
-  type?: 'button' | 'submit' | 'reset'
-  disabled?: boolean
-  color?: string
-  size?: 'small' | 'regular' | 'large'
-  variant?: 'solid' | 'transparent'
-}
-
-export type ActionComponent = {
-  focus: () => void
-  blur: () => void
-}
-
-export interface NavigationItem {
-  id: string
-  label: string
-  icon?: string
-  url?: string
-  children?: NavigationItem[]
-  type?: 'tile' | 'tab' | 'dropdown'
-  color?: string
-  disabled?: boolean
-  alignment?: 'start' | 'end'
-}
-
-export interface NavigationProps {
-  items: NavigationItem[]
-  type?: 'tiles' | 'tabs' | 'dropdowns'
-  orientation?: 'horizontal' | 'vertical'
-  activeItem?: string
-  color?: string
-  hoverColor?: string
-  activeColor?: string
-  disabledColor?: string
-  iconSize?: string
-  gap?: string
-  padding?: string
-  borderRadius?: string
-  showIcons?: boolean
-  activeItemAlignment?: 'start' | 'end'
-}
-
-export interface NavigationComponent {
-  props: NavigationProps
-  emits: {
-    (e: 'item-click', item: NavigationItem): void
-    (e: 'update:activeItem', id: string): void
-  }
-}