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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@a-vision-software/vue-input-components",
-    "version": "1.3.12",
+    "version": "1.3.13",
     "description": "A collection of reusable Vue 3 input components with TypeScript support",
     "author": "A-Vision Software",
     "license": "MIT",
@@ -18,21 +18,24 @@
         "typescript",
         "file-upload",
         "text-input",
+        "date-picker",
+        "dropdown",
         "textarea"
     ],
     "type": "module",
     "files": [
         "src",
+        "types",
         "dist"
     ],
     "main": "./dist/vue-input-components.cjs.js",
     "module": "./dist/vue-input-components.es.js",
-    "types": "./dist/types.d.ts",
+    "types": "./types/index.ts",
     "exports": {
         ".": {
             "import": "./dist/vue-input-components.es.js",
             "require": "./dist/vue-input-components.cjs.js",
-            "types": "./dist/types.d.ts"
+            "types": "./types/index.ts"
         },
         "./styles.css": "./dist/vue-input-components.css",
         "./styles": "./dist/vue-input-components.css"

package/src/components/TextInput.vue

@@ -1,47 +1,53 @@
 <template>
   <div class="text-input" :class="{
+    'text-input--disabled': disabled,
+    'text-input--has-error': error,
     [`label-${labelPosition}`]: label,
     [`label-align-${labelAlign}`]: label,
+    'text-input--has-icon': icon,
   }" :style="[
-    { width: type === 'date' ? totalWidth || '12rem' : totalWidth || '100%' },
+    { width: (width || '100%') },
     labelStyle,
     {
-      '--max-textarea-height': props.maxHeight || props.height || '14rem',
-      '--textarea-height': props.height || '5.5rem',
-      '--input-bg-color': props.bgColor || 'var(--input-color, #ffffffaa)',
-      '--datepicker-bg-color': props.bgColor || 'var(--background-color, white)',
-    },
+      '--text-input-color': error ? 'var(--danger-color)' : 'var(--text-primary)',
+      '--text-input-hover-color': 'var(--primary-color)',
+      '--text-input-active-color': 'var(--primary-color)',
+      '--text-input-disabled-color': 'var(--text-disabled)',
+      '--text-input-background-color': bgColor || 'var(--input-color, #ffffffaa)',
+      '--text-dp-background-color': bgColor || '#ffffff',
+      '--text-input-border-radius': '0.5rem',
+      '--text-input-padding': '0.5rem',
+      '--max-textarea-height': maxHeight || height || '14rem',
+      '--textarea-height': height || '5.5rem',
+    }
   ]">
     <label v-if="label" :for="id" class="label">
       {{ label }}
     </label>
-    <div class="input-wrapper" :class="{
-      'has-error': error,
-      'has-icon': icon,
-    }">
-      <div v-if="icon" class="icon-wrapper" @click="focusInput">
-        <font-awesome-icon :icon="icon" class="icon" />
+    <div class="text-input__wrapper">
+      <div v-if="icon" class="text-input__icon" @click="focusInput">
+        <font-awesome-icon :icon="icon" />
       </div>
       <Datepicker v-if="type === 'date'" :id="id" v-model="dateValue" :placeholder="placeholder" :disabled="disabled"
         :readonly="readonly" :min-date="min" :max-date="max" :format="dateFormat" :enable-time-picker="false"
         :auto-apply="true" :close-on-auto-apply="true" :clearable="true"
-        :input-class-name="['input', { 'has-icon': icon }]" @update:model-value="handleDateChange" @focus="handleFocus"
-        @blur="handleBlur" />
-      <input v-else-if="!isTextarea" :id="id" :type="type" :value="modelValue" :placeholder="placeholder"
-        :required="required" :disabled="disabled" :readonly="readonly" :maxlength="maxlength" class="input"
+        :input-class-name="['text-input__input', { 'text-input__input--has-icon': icon }]"
+        @update:model-value="handleDateChange" @focus="handleFocus" @blur="handleBlur" />
+      <input v-else-if="type !== 'textarea'" :id="id" :type="type" :value="modelValue" :placeholder="placeholder"
+        :required="required" :disabled="disabled" :readonly="readonly" :maxlength="maxlength" class="text-input__input"
         @input="handleInput" @focus="handleFocus" @blur="handleBlur" @keydown="handleKeydown" ref="inputRef" />
       <textarea v-else :id="id" :value="modelValue" :placeholder="placeholder" :required="required" :disabled="disabled"
-        class="input" @input="handleInput" ref="inputRef"></textarea>
+        class="text-input__input" @input="handleInput" ref="inputRef"></textarea>
       <span v-if="required && !showSaved && !showChanged && !error"
-        class="status-indicator required-indicator">required</span>
+        class="text-input__status required-indicator">required</span>
       <transition name="fade">
-        <span v-if="showSaved && !showChanged && !error" class="status-indicator saved-indicator">saved</span>
+        <span v-if="showSaved && !showChanged && !error" class="text-input__status saved-indicator">saved</span>
       </transition>
       <transition name="fade">
-        <span v-if="showChanged && !error" class="status-indicator changed-indicator">changed</span>
+        <span v-if="showChanged && !error" class="text-input__status changed-indicator">changed</span>
       </transition>
       <transition name="fade">
-        <span v-if="error" class="status-indicator error-indicator" :data-error="error">error</span>
+        <span v-if="error" class="text-input__status error-indicator" :data-error="error">error</span>
       </transition>
     </div>
   </div>
@@ -49,7 +55,7 @@
 
 <script setup lang="ts">
 import { computed, ref, onUnmounted, onMounted } from 'vue'
-import { TextInputProps } from '../types'
+import { TextInputProps } from '../types/textinput'
 import Datepicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
 
@@ -65,6 +71,13 @@ const props = withDefaults(defineProps<TextInputProps>(), {
   error: '',
   min: undefined,
   max: undefined,
+  labelPosition: 'top',
+  labelAlign: 'left',
+  labelWidth: '',
+  height: '5.5rem',
+  maxHeight: '14rem',
+  bgColor: 'var(--input-color, #ffffffee)',
+  width: (props) => (props.type === 'date') ? '10rem' : '100%',
 })
 
 const emit = defineEmits<{
@@ -130,7 +143,6 @@ const handleAutosave = async (value: string) => {
 }
 
 const debounceAutosave = (value: string) => {
-  // Clear existing timers
   if (debounceTimer.value) {
     clearTimeout(debounceTimer.value)
   }
@@ -138,18 +150,15 @@ const debounceAutosave = (value: string) => {
     clearTimeout(changedTimer.value)
   }
 
-  // Show changed indicator immediately
   if (!props.error) {
     showChanged.value = true
   }
 
-  // Trigger changed event after 500ms
   changedTimer.value = window.setTimeout(() => {
     emit('changed')
     isChanged.value = true
   }, 500)
 
-  // Trigger autosave after 1500ms
   debounceTimer.value = window.setTimeout(() => {
     handleAutosave(value)
   }, 1500)
@@ -160,15 +169,17 @@ const focusInput = () => {
 }
 
 const adjustHeight = (element: HTMLTextAreaElement) => {
-  element.style.height = 'auto' // Reset height to auto to calculate new height
-  element.style.height = `${element.scrollHeight}px` // Set height to scrollHeight
+  element.style.height = 'auto'
+  element.style.height = `${element.scrollHeight}px`
 }
 
 const handleInput = (event: Event) => {
   const value = (event.target as HTMLTextAreaElement).value
   emit('update:modelValue', value)
   debounceAutosave(value)
-  adjustHeight(event.target as HTMLTextAreaElement) // Adjust height on input
+  if (props.type === 'text' && (event.target as HTMLTextAreaElement).tagName === 'TEXTAREA') {
+    adjustHeight(event.target as HTMLTextAreaElement)
+  }
 }
 
 const handleFocus = () => {
@@ -189,7 +200,6 @@ const handleDateChange = (date: Date | null) => {
   debounceAutosave(formattedDate)
 }
 
-// Cleanup timers on unmount
 onUnmounted(() => {
   if (debounceTimer.value) {
     clearTimeout(debounceTimer.value)
@@ -218,6 +228,12 @@ defineExpose({
   gap: 0.5rem;
   width: 100%;
   margin-top: 0.7rem;
+
+  &:not(.text-input--has-icon) {
+    .text-input__wrapper {
+      grid-template-columns: 1fr;
+    }
+  }
 }
 
 .text-input.label-top {
@@ -253,40 +269,31 @@ defineExpose({
   text-align: center;
 }
 
-.required {
-  color: var(--danger-color);
-  margin-left: 0.25rem;
-}
-
-.input-wrapper {
+.text-input__wrapper {
   position: relative;
   display: grid;
-  grid-template-columns: 1fr;
-  border: 1px solid var(--border-color);
-  border-radius: 0.5rem;
+  grid-template-columns: 2em auto;
+  border: 1px solid var(--text-input-color);
+  border-radius: var(--text-input-border-radius);
   transition: all 0.2s ease;
   width: 100%;
   min-height: 2rem;
-  background: var(--input-bg-color);
-
-  &.has-icon {
-    grid-template-columns: auto 1fr;
-  }
+  background: var(--text-input-background-color);
 
   &:hover {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 2px var(--primary-color) inset;
+    border-color: var(--text-input-hover-color);
+    box-shadow: 0 0 2px var(--text-input-hover-color) inset;
   }
 
   &:focus-within {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 2px var(--primary-color) inset;
+    border-color: var(--text-input-active-color);
+    box-shadow: 0 0 2px var(--text-input-active-color) inset;
   }
 
-  &.has-error {
+  &.text-input--has-error {
     border-color: var(--danger-color);
 
-    .icon {
+    .text-input__icon {
       color: var(--danger-color);
     }
 
@@ -307,11 +314,16 @@ defineExpose({
   }
 }
 
-.icon-wrapper {
+.text-input--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.text-input__icon {
   display: grid;
   place-items: start;
   padding: 0.5rem;
-  border-right: 1px solid rgb(from var(--border-color) r g b / 20%);
+  border-right: 1px solid rgb(from var(--text-input-color) r g b / 20%);
   cursor: pointer;
   overflow: hidden;
 
@@ -325,10 +337,10 @@ defineExpose({
   }
 }
 
-.input {
+.text-input__input {
   padding: 0.25rem 0.5rem;
   border: none;
-  border-radius: 0.5rem;
+  border-radius: var(--text-input-border-radius);
   outline: none;
   font-size: 1rem;
   color: var(--text-color);
@@ -346,7 +358,7 @@ defineExpose({
   }
 }
 
-.status-indicator {
+.text-input__status {
   position: absolute;
   display: block;
   top: -1px;
@@ -354,7 +366,7 @@ defineExpose({
   right: 0.5rem;
   font-size: 0.75rem;
   color: var(--text-muted);
-  background-color: var(--input-bg-color);
+  background-color: var(--text-input-background-color);
   padding: 0 0.25rem;
 
   &.saved-indicator {
@@ -381,8 +393,8 @@ defineExpose({
 }
 
 textarea {
-  min-height: var(--textarea-height, 5.5rem);
-  max-height: var(--max-textarea-height, 14rem);
+  min-height: var(--textarea-height);
+  max-height: var(--max-textarea-height);
   overflow-y: auto;
   resize: none;
 }
@@ -407,7 +419,7 @@ textarea {
   cursor: not-allowed;
 }
 
-:deep(.dp__input.has-icon) {
+:deep(.dp__input.text-input__input--has-icon) {
   padding-left: 2.5rem;
 }
 
@@ -420,9 +432,9 @@ textarea {
 }
 
 :deep(.dp__menu) {
-  background-color: var(--datepicker-bg-color);
-  border: 1px solid var(--border-color);
-  border-radius: 0.5rem;
+  background-color: var(--text-dp-background-color);
+  border: 1px solid var(--text-input-color);
+  border-radius: var(--text-input-border-radius);
   box-shadow:
     0 4px 6px -1px rgba(0, 0, 0, 0.1),
     0 2px 4px -1px rgba(0, 0, 0, 0.06);
@@ -433,17 +445,17 @@ textarea {
 }
 
 :deep(.dp__today) {
-  border-color: var(--primary-color);
+  border-color: var(--text-input-active-color);
 }
 
 :deep(.dp__active_date) {
-  background-color: var(--primary-color);
+  background-color: var(--text-input-active-color);
   color: white;
 }
 
 :deep(.dp__range_start),
 :deep(.dp__range_end) {
-  background-color: var(--primary-color);
+  background-color: var(--text-input-active-color);
   color: white;
 }
 
@@ -452,10 +464,7 @@ textarea {
   color: var(--text-color);
 }
 
-:deep(.dp__arrow_bottom) {
-  background-color: inherit;
-}
-
+:deep(.dp__arrow_bottom),
 :deep(.dp__arrow_top) {
   background-color: inherit;
 }

package/src/types/action.ts

@@ -0,0 +1,19 @@
+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 interface ActionEmits {
+  (e: 'click', event: MouseEvent): void
+}
+
+export interface ActionComponent {
+  focus: () => void
+  blur: () => void
+}

package/src/types/fileupload.ts

@@ -0,0 +1,26 @@
+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 interface FileUploadComponent {
+  focus: () => void
+  blur: () => void
+}

package/src/types/index.ts

@@ -1,3 +1,9 @@
 import type { NavigationProps, NavigationItem } from './navigation'
 
 export type { NavigationProps, NavigationItem }
+
+export * from './textinput'
+export * from './fileupload'
+export * from './action'
+export * from './navigation'
+export * from './dropdown'

package/src/types/textinput.ts

@@ -0,0 +1,36 @@
+export interface TextInputProps {
+  modelValue: string
+  type?: 'text' | 'textarea' | 'password' | 'email' | 'tel' | 'url' | 'date' | 'number'
+  placeholder?: string
+  label?: 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
+}
+
+export interface TextInputEmits {
+  (e: 'update:modelValue', value: string): void
+  (e: 'changed'): void
+  (e: 'saved'): void
+  (e: 'focus'): void
+  (e: 'blur'): void
+  (e: 'keydown', event: KeyboardEvent): void
+}
+
+export interface TextInputComponent {
+  focus: () => void
+  blur: () => void
+}

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
-  }>
-}