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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@a-vision-software/vue-input-components",
-    "version": "1.3.19",
+    "version": "1.3.21",
     "description": "A collection of reusable Vue 3 input components with TypeScript support",
     "author": "A-Vision Software",
     "license": "MIT",

package/src/components/Checkbox.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="checkbox" :class="{
+    'checkbox--disabled': disabled,
+    'checkbox--has-error': error,
+    'checkbox--large-icon': iconSize === 'large',
+    [`label-${labelPosition}`]: label,
+    [`label-align-${labelAlign}`]: label,
+    [`checkbox--${presentation}`]: presentation,
+  }" :style="[
+    { width: width || '100%' },
+    labelStyle,
+    {
+      '--checkbox-color': error ? 'var(--danger-color)' : color,
+      '--checkbox-hover-color': hoverColor ? hoverColor : 'var(--checkbox-color)',
+      '--checkbox-active-color': activeColor ? activeColor : 'var(--checkbox-color)',
+      '--checkbox-disabled-color': disabledColor,
+      '--checkbox-background-color': backgroundColor,
+      '--checkbox-border-radius': borderRadius,
+      '--checkbox-padding': padding,
+    }
+  ]">
+    <label v-if="label" :for="id" class="label">
+      {{ label }}
+    </label>
+    <div class="checkbox__options" :style="{
+      'grid-template-columns': `repeat(${columns || 1}, 1fr)`,
+      'gap': presentation === 'minimal' ? '0' : '0.5rem'
+    }">
+      <div v-for="option in options" :key="option.id" class="checkbox__option" :class="{
+        'checkbox__option--disabled': option.disabled || disabled,
+        'checkbox__option--selected': isSelected(option),
+        'checkbox__option--round': !multiple && options.length > 1
+      }" @click="() => toggleOption(option)">
+        <div class="checkbox__icon">
+          <font-awesome-icon v-if="isSelected(option)" :icon="multiple ? 'square-check' : 'circle-check'" />
+          <font-awesome-icon v-else :icon="multiple ? 'square' : 'circle'" />
+        </div>
+        <div class="checkbox__label">{{ option.label }}</div>
+      </div>
+    </div>
+    <span v-if="required && !showSaved && !showChanged && !error"
+      class="status-indicator required-indicator">required</span>
+    <transition name="fade">
+      <span v-if="showSaved && !error" class="status-indicator saved-indicator">saved</span>
+    </transition>
+    <transition name="fade">
+      <span v-if="showChanged && !error" class="status-indicator changed-indicator">changed</span>
+    </transition>
+    <transition name="fade">
+      <span v-if="error" class="status-indicator error-indicator" :data-error="error">error</span>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import type { CheckboxProps, CheckboxOption } from '../types/checkbox'
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  multiple: false,
+  disabled: false,
+  width: '100%',
+  color: 'var(--text-primary)',
+  hoverColor: '',
+  activeColor: '',
+  disabledColor: 'var(--text-disabled)',
+  backgroundColor: 'white',
+  borderRadius: '0.375rem',
+  padding: '0.5rem',
+  icon: '',
+  iconSize: 'normal',
+  required: false,
+  error: '',
+  label: '',
+  labelPosition: 'top',
+  labelAlign: 'left',
+  labelWidth: '',
+  columns: 1,
+  presentation: 'default',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | string[]): void
+  (e: 'changed'): void
+  (e: 'saved'): void
+}>()
+
+const id = ref<string>('')
+const showSaved = ref(false)
+const showChanged = ref(false)
+const isChanged = ref(false)
+const debounceTimer = ref<number | null>(null)
+const changedTimer = ref<number | null>(null)
+
+const isSelected = (option: CheckboxOption) => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(option.id)
+  }
+  return option.id === props.modelValue
+}
+
+const toggleOption = (option: CheckboxOption) => {
+  if (option.disabled || props.disabled) return
+
+  if (props.multiple) {
+    const currentValue = Array.isArray(props.modelValue) ? props.modelValue : []
+    const newValue = currentValue.includes(option.id)
+      ? currentValue.filter((id) => id !== option.id)
+      : [...currentValue, option.id]
+    emit('update:modelValue', newValue)
+    debounceAutosave(newValue)
+  } else {
+    const newValue = option.id === props.modelValue ? '' : option.id
+    emit('update:modelValue', newValue)
+    debounceAutosave(newValue)
+  }
+}
+
+const handleAutosave = async (value: string | string[]) => {
+  if (props.autosave) {
+    try {
+      await props.autosave(value)
+      if (!props.error) {
+        emit('saved')
+        showSaved.value = true
+        showChanged.value = false
+        setTimeout(() => {
+          showSaved.value = false
+        }, 3000)
+      }
+    } catch (error) {
+      console.error('Autosave failed:', error)
+    }
+  }
+}
+
+const debounceAutosave = (value: string | string[]) => {
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+  }
+  if (changedTimer.value) {
+    clearTimeout(changedTimer.value)
+  }
+
+  if (!props.error) {
+    showChanged.value = true
+  }
+
+  changedTimer.value = window.setTimeout(() => {
+    emit('changed')
+    isChanged.value = true
+  }, 500)
+
+  debounceTimer.value = window.setTimeout(() => {
+    handleAutosave(value)
+  }, 1500)
+}
+
+onMounted(() => {
+  id.value = `checkbox-${Math.random().toString(36).substring(2, 11)}`
+})
+
+const labelStyle = computed(() => {
+  if (!props.label) return {}
+  if (props.labelPosition === 'left' && props.labelWidth) {
+    return {
+      'grid-template-columns': `${props.labelWidth} 1fr`,
+    }
+  }
+  return {}
+})
+</script>
+
+<style scoped>
+.checkbox {
+  position: relative;
+  width: var(--checkbox-width);
+  font-family: Arial, sans-serif;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  display: grid;
+  gap: 0.5rem;
+  margin-top: 0.7rem;
+
+  .checkbox__options {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  &.checkbox--minimal .checkbox__options {
+    gap: 0;
+    margin: -0.5rem 0;
+  }
+}
+
+.checkbox--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.checkbox--has-error {
+  border-color: var(--danger-color);
+}
+
+
+.checkbox__option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: var(--checkbox-padding);
+  border: 1px solid var(--checkbox-color);
+  border-radius: var(--checkbox-border-radius);
+  background-color: var(--checkbox-background-color);
+  color: var(--checkbox-color);
+  transition: all 0.2s ease;
+  min-width: 0;
+}
+
+.checkbox--minimal .checkbox__option {
+  border: none;
+  border-radius: 0;
+  padding: 0.25rem 0.5rem;
+  margin: 0;
+}
+
+.checkbox__option:hover {
+  border-color: var(--checkbox-hover-color);
+  color: var(--checkbox-hover-color);
+}
+
+.checkbox--minimal .checkbox__option:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.checkbox__option--selected {
+  border-color: var(--checkbox-active-color);
+  color: var(--checkbox-active-color);
+  background-color: rgba(from var(--checkbox-active-color) r g b / 0.1);
+}
+
+.checkbox--minimal .checkbox__option--selected {
+  background-color: rgba(from var(--checkbox-active-color) r g b / 0.1);
+}
+
+.checkbox__option--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  color: var(--checkbox-disabled-color);
+}
+
+.checkbox--minimal .checkbox__option--disabled {
+  background-color: transparent;
+}
+
+.checkbox__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+  flex-shrink: 0;
+}
+
+.checkbox__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-indicator {
+  position: absolute;
+  top: -1px;
+  line-height: 1px;
+  right: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  background-color: var(--checkbox-background-color);
+  padding: 0 0.25rem;
+}
+
+.status-indicator.saved-indicator {
+  color: var(--success-color);
+}
+
+.status-indicator.changed-indicator {
+  color: var(--warning-color);
+}
+
+.status-indicator.error-indicator {
+  color: var(--danger-color);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.checkbox.label-top {
+  grid-template-rows: auto 1fr;
+}
+
+.checkbox.label-left {
+  grid-template-columns: 30% 1fr;
+  align-items: start;
+  gap: 1rem;
+}
+
+.checkbox.label-left .label {
+  padding-top: 0.25rem;
+  width: 100%;
+}
+
+.label {
+  font-weight: 500;
+  color: var(--text-color);
+  text-align: left;
+}
+
+.label-align-left .label {
+  text-align: left;
+}
+
+.label-align-right .label {
+  text-align: right;
+}
+
+.label-align-center .label {
+  text-align: center;
+}
+</style>

package/src/components/TextInput.vue

@@ -177,7 +177,7 @@ const handleInput = (event: Event) => {
   const value = (event.target as HTMLTextAreaElement).value
   emit('update:modelValue', value)
   debounceAutosave(value)
-  if (props.type === 'text' && (event.target as HTMLTextAreaElement).tagName === 'TEXTAREA') {
+  if (props.type === 'textarea' && (event.target as HTMLTextAreaElement).tagName === 'TEXTAREA') {
     adjustHeight(event.target as HTMLTextAreaElement)
   }
 }

package/src/index.ts

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

package/src/router/index.ts

@@ -5,6 +5,7 @@ import ActionTestView from '../views/ActionTestView.vue'
 import DashboardView from '../views/DashboardView.vue'
 import NavigationTestView from '../views/NavigationTestView.vue'
 import DropdownTestView from '../views/DropdownTestView.vue'
+import CheckboxTestView from '../views/CheckboxTestView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -45,6 +46,12 @@ const router = createRouter({
       component: DropdownTestView,
       meta: { title: 'Dropdown Test' },
     },
+    {
+      path: '/checkbox',
+      name: 'checkbox',
+      component: CheckboxTestView,
+      meta: { title: 'Checkbox Test' },
+    },
   ],
 })
 

package/src/types/checkbox.ts

@@ -0,0 +1,31 @@
+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/src/types/index.ts

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

package/src/types/textinput.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 {

package/src/views/CheckboxTestView.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="checkbox-test">
+    <div class="checkbox-test__back">
+      <router-link to="/" class="back-link"> ← Back to Dashboard </router-link>
+    </div>
+
+    <div class="checkbox-test__section">
+      <h2>Single Select Checkbox</h2>
+      <Checkbox v-model="selectedSingle" :options="options" label="Select a Color" labelPosition="left"
+        labelWidth="100px" labelAlign="right" required @update:modelValue="handleSingleChange"
+        error="This is an error" />
+      <div v-if="selectedSingle.length" class="selection-info">
+        Selected: {{ Array.isArray(selectedSingle) ? getSelectedLabels(selectedSingle).join(', ') :
+          getOptionLabel(selectedSingle) }}
+      </div>
+    </div>
+
+    <div class="checkbox-test__section">
+      <h2>Multiple Select Checkbox</h2>
+      <Checkbox v-model="selectedMultiple" :options="options" label="Select Colors" :multiple="true" icon="paintbrush"
+        @update:modelValue="handleMultipleChange" color="#aa0000" />
+      <div v-if="selectedMultiple.length" class="selection-info">
+        Selected: {{ getSelectedLabels(selectedMultiple).join(', ') }}
+      </div>
+    </div>
+
+    <div class="checkbox-test__section">
+      <h2>Checkbox with Disabled Options</h2>
+      <Checkbox v-model="selectedWithDisabled" :options="optionsWithDisabled" label="Select with Disabled Options"
+        @update:modelValue="handleDisabledChange" />
+      <div v-if="selectedWithDisabled" class="selection-info">
+        Selected: {{ getOptionLabel(selectedWithDisabled) }}
+      </div>
+    </div>
+
+    <div class="checkbox-test__section">
+      <h2>Disabled Checkbox</h2>
+      <Checkbox v-model="selectedDisabled" :options="options" label="Disabled Checkbox" :disabled="true" />
+    </div>
+
+    <div class="checkbox-test__section">
+      <h2>Custom Styled Checkbox</h2>
+      <Checkbox v-model="selectedCustom" :options="options" label="Custom Style" color="#4a90e2" hoverColor="#357abd"
+        activeColor="#2c5a8c" borderRadius="1rem" padding="0.75rem 1rem" @update:modelValue="handleCustomChange" />
+      <div v-if="selectedCustom" class="selection-info">
+        Selected: {{ getOptionLabel(selectedCustom) }}
+      </div>
+    </div>
+
+    <div class="checkbox-test__section">
+      <h2>Checkbox with Autosave</h2>
+      <Checkbox v-model="selectedAutosave" :options="options" label="With Autosave" :autosave="handleAutosave"
+        @update:modelValue="handleAutosaveChange" />
+      <div v-if="selectedAutosave" class="selection-info">
+        Selected: {{ getOptionLabel(selectedAutosave) }}
+      </div>
+    </div>
+
+    <div class="checkbox-test__section">
+      <h2>Minimal Presentation</h2>
+      <Checkbox v-model="selectedMinimal" :options="options" label="Minimal Style" presentation="minimal"
+        @update:modelValue="handleMinimalChange" />
+      <div v-if="selectedMinimal" class="selection-info">
+        Selected: {{ getOptionLabel(selectedMinimal) }}
+      </div>
+    </div>
+
+    <div class="checkbox-test__section">
+      <h2>Multi-Column Checkbox</h2>
+      <Checkbox v-model="selectedMultiColumn" :options="options" label="Multi-Column Layout" :columns="3"
+        :multiple="true" presentation="minimal" @update:modelValue="handleMultiColumnChange" />
+      <div v-if="selectedMultiColumn" class="selection-info">
+        Selected: {{ getSelectedLabels(selectedMultiColumn).join(', ') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { CheckboxOption } from '../types/checkbox'
+import Checkbox from '@/components/Checkbox.vue'
+
+const options: CheckboxOption[] = [
+  { id: 'red', label: 'Red' },
+  { id: 'blue', label: 'Blue' },
+  { id: 'green', label: 'Green' },
+  { id: 'yellow', label: 'Yellow' },
+  { id: 'purple', label: 'Purple' },
+]
+
+const optionsWithDisabled: CheckboxOption[] = [
+  { id: 'red', label: 'Red' },
+  { id: 'blue', label: 'Blue', disabled: true },
+  { id: 'green', label: 'Green' },
+  { id: 'yellow', label: 'Yellow', disabled: true },
+  { id: 'purple', label: 'Purple' },
+]
+
+const selectedSingle = ref<string[]>(['red', 'yellow'])
+const selectedMultiple = ref<string[]>(['red', 'yellow'])
+const selectedCustom = ref('')
+const selectedDisabled = ref('green')
+const selectedWithDisabled = ref('')
+const selectedAutosave = ref('')
+const selectedMinimal = ref('')
+const selectedMultiColumn = ref<string[]>(['red', 'yellow'])
+
+const getOptionLabel = (id: string) => {
+  return options.find((option) => option.id === id)?.label || ''
+}
+
+const getSelectedLabels = (ids: string[]) => {
+  return ids.map((id) => getOptionLabel(id)).filter(Boolean)
+}
+
+const handleSingleChange = (value: string | string[]) => {
+  if (typeof value === 'string') {
+    console.log('Single selection changed:', value)
+  }
+}
+
+const handleMultipleChange = (value: string | string[]) => {
+  if (Array.isArray(value)) {
+    console.log('Multiple selection changed:', value)
+  }
+}
+
+const handleCustomChange = (value: string | string[]) => {
+  if (typeof value === 'string') {
+    console.log('Custom selection changed:', value)
+  }
+}
+
+const handleDisabledChange = (value: string | string[]) => {
+  if (typeof value === 'string') {
+    console.log('Selection with disabled options changed:', value)
+  }
+}
+
+const handleAutosaveChange = (value: string | string[]) => {
+  if (typeof value === 'string') {
+    console.log('Autosave selection changed:', value)
+  }
+}
+
+const handleAutosave = async (value: string | string[]) => {
+  console.log('Autosaving:', value)
+  // Simulate API call
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+}
+
+const handleMinimalChange = (value: string | string[]) => {
+  if (typeof value === 'string') {
+    console.log('Minimal selection changed:', value)
+  }
+}
+
+const handleMultiColumnChange = (value: string | string[]) => {
+  if (typeof value === 'string') {
+    console.log('Multi-column selection changed:', value)
+  }
+}
+</script>
+
+<style scoped>
+.checkbox-test {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+  margin-bottom: 5rem;
+}
+
+.checkbox-test__back {
+  margin-bottom: 2rem;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #4a90e2;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.back-link:hover {
+  color: #357abd;
+}
+
+.checkbox-test__section {
+  margin-bottom: 3rem;
+}
+
+.checkbox-test__section h2 {
+  margin-bottom: 1rem;
+  color: #333;
+  font-size: 1.5rem;
+}
+
+.selection-info {
+  margin-top: 1rem;
+  padding: 0.5rem;
+  background-color: #f7fafc;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  color: #4a5568;
+}
+</style>