@a-vision-software/vue-input-components 1.4.8 → 1.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@a-vision-software/vue-input-components",
-    "version": "1.4.8",
+    "version": "1.4.10",
     "description": "A collection of reusable Vue 3 input components with TypeScript support",
     "author": "A-Vision Software",
     "license": "MIT",
@@ -37,6 +37,9 @@
             "import": "./dist/vue-input-components.es.js",
             "require": "./dist/vue-input-components.cjs.js"
         },
+        "./global": {
+            "types": "./dist/src/global.d.ts"
+        },
         "./dist/*": "./dist/*",
         "./styles.css": "./dist/vue-input-components.css",
         "./styles": "./dist/vue-input-components.css"

package/src/components/TextInput.vue

@@ -1,26 +1,31 @@
 <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: (width || '100%') },
-    labelStyle,
-    {
-      '--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',
-    }
-  ]">
+  <div
+    class="text-input"
+    :class="{
+      'text-input--disabled': disabled,
+      'text-input--has-error': error,
+      'text-input--date': type === 'date',
+      [`label-${labelPosition}`]: label,
+      [`label-align-${labelAlign}`]: label,
+      'text-input--has-icon': icon,
+    }"
+    :style="[
+      { width: width || '100%' },
+      labelStyle,
+      {
+        '--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>
@@ -28,26 +33,72 @@
       <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"
+      <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="['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="text-input__input" @input="handleInput" ref="inputRef"></textarea>
-      <span v-if="required && !showSaved && !showChanged && !error"
-        class="text-input__status required-indicator">required</span>
+        @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="text-input__input"
+        @input="handleInput"
+        ref="inputRef"
+      ></textarea>
+      <span
+        v-if="required && !showSaved && !showChanged && !error"
+        class="text-input__status required-indicator"
+        >required</span
+      >
       <transition name="fade">
-        <span v-if="showSaved && !showChanged && !error" class="text-input__status 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="text-input__status 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="text-input__status 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>
@@ -77,7 +128,7 @@ const props = withDefaults(defineProps<TextInputProps>(), {
   height: '5.5rem',
   maxHeight: '14rem',
   bgColor: 'var(--input-color, #ffffffee)',
-  width: (props) => (props.type === 'date') ? '10rem' : '100%',
+  width: '100%',
 })
 
 const emit = defineEmits<{
@@ -120,6 +171,7 @@ const formatDateForModel = (date: Date | null): string => {
 
 const parseDateFromModel = (dateStr: string): Date | null => {
   if (!dateStr) return null
+  if (dateStr.includes('T')) dateStr = dateStr.split('T')[0]
   const [year, month, day] = dateStr.split('-').map(Number)
   return new Date(year, month - 1, day)
 }
@@ -216,11 +268,14 @@ onMounted(() => {
   }
 })
 
-watch(() => props.modelValue, (newValue) => {
-  if (props.type === 'date' && newValue) {
-    dateValue.value = parseDateFromModel(newValue)
-  }
-})
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (props.type === 'date' && newValue) {
+      dateValue.value = parseDateFromModel(newValue)
+    }
+  },
+)
 
 defineExpose({
   focus: () => inputRef.value?.focus(),
@@ -280,11 +335,20 @@ defineExpose({
   gap: 1rem;
 }
 
+.text-input.label-left.text-input--date {
+  grid-template-columns: auto 1fr;
+}
+
 .text-input.label-left .label {
   padding-top: 0.25rem;
   width: 100%;
 }
 
+.text-input.label-left.text-input--date .label {
+  width: auto;
+  white-space: nowrap;
+}
+
 .label {
   font-weight: 500;
   color: var(--text-color);
@@ -325,8 +389,6 @@ defineExpose({
   }
 }
 
-.text-input {}
-
 .text-input--disabled {
   opacity: 0.6;
   cursor: not-allowed;

package/src/global.ts

@@ -0,0 +1,23 @@
+import type TextInput from './components/TextInput.vue'
+import type FileUpload from './components/FileUpload.vue'
+import type Navigation from './components/Navigation.vue'
+import type Action from './components/Action.vue'
+import type Dropdown from './components/Dropdown.vue'
+import type Checkbox from './components/Checkbox.vue'
+import type List from './components/List.vue'
+import type Modal from './components/Modal.vue'
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    TextInput: typeof TextInput
+    FileUpload: typeof FileUpload
+    Navigation: typeof Navigation
+    Action: typeof Action
+    Dropdown: typeof Dropdown
+    Checkbox: typeof Checkbox
+    List: typeof List
+    Modal: typeof Modal
+  }
+}
+
+export {}