@a-vision-software/vue-input-components 1.2.11 → 1.2.13

package/src/components/Navigation.vue

@@ -1,12 +1,10 @@
 <template>
-  <nav
-    :class="[
-      'navigation',
-      `navigation--${type}`,
-      `navigation--${orientation}`,
-      { 'navigation--large-icons': iconSize === 'large' },
-    ]"
-    :style="{
+  <nav :class="[
+    'navigation',
+    `navigation--${type}`,
+    `navigation--${orientation}`,
+    { 'navigation--large-icons': iconSize === 'large' },
+  ]" :style="{
       '--navigation-color': color,
       '--navigation-hover-color': hoverColor,
       '--navigation-active-color': activeColor,
@@ -23,101 +21,61 @@
         : 'none',
       '--navigation-tiles-grid': navigationGrid,
       'max-height': height,
-    }"
-  >
+    }">
     <template v-if="type === 'tiles'">
       <div class="navigation__tiles">
-        <div
-          v-for="(item, index) in sortedItems"
-          :key="item.id"
-          class="navigation__tile"
-          :class="[
-            { 'navigation__tile--active': item.id === activeItem },
-            { 'navigation__tile--disabled': item.disabled },
-            { 'navigation__tile--right': item.alignment === 'right' },
-            { 'navigation__tile--open': isDropdownOpen(item.id) },
-            { 'navigation__tile--spacer': item.id.includes('spacer') },
-          ]"
-          :style="{
-            '--item-alignment': item.alignment || activeItemAlignment,
-            width: item.width || '150px',
-            'min-width': item.width || '150px',
-            'max-width': item.width || '150px',
-            'grid-column': item.alignment === 'right' ? `${index - items.length}` : `auto`,
-          }"
-          @click="(e) => !item.id.includes('spacer') && handleItemClick(item, e)"
-        >
-          <div
-            class="navigation__tile-content"
-            :class="{
-              'navigation__tile-content--icon-only': !item.label,
-              'navigation__tile-content--large-icon': iconSize === 'large' && item.icon,
-            }"
-          >
+        <div v-for="(item, index) in sortedItems" :key="item.id" class="navigation__tile" :class="[
+          { 'navigation__tile--active': item.id === activeItem },
+          { 'navigation__tile--disabled': item.disabled },
+          { 'navigation__tile--right': item.alignment === 'right' },
+          { 'navigation__tile--open': isDropdownOpen(item.id) },
+          { 'navigation__tile--spacer': item.id.includes('spacer') },
+        ]" :style="{
+                  '--item-alignment': item.alignment || activeItemAlignment,
+                  width: item.width || '150px',
+                  'min-width': item.width || '150px',
+                  'max-width': item.width || '150px',
+                  'grid-column': item.alignment === 'right' ? `${index - items.length}` : `auto`,
+                }" @click="(e) => !item.id.includes('spacer') && handleItemClick(item, e)">
+          <div class="navigation__tile-content" :class="{
+            'navigation__tile-content--icon-only': !item.label,
+            'navigation__tile-content--large-icon': iconSize === 'large' && item.icon,
+          }">
             <div v-if="item.icon" class="navigation__icon">
-              <img
-                v-if="item.icon.startsWith('img:')"
-                :src="item.icon.substring(4)"
-                :alt="item.label || 'Icon'"
-                class="navigation__icon-image"
-              />
+              <img v-if="item.icon.startsWith('img:')" :src="item.icon.substring(4)" :alt="item.label || 'Icon'"
+                class="navigation__icon-image" />
               <font-awesome-icon v-else :icon="item.icon" />
             </div>
-            <div
-              v-if="item.label"
-              class="navigation__label"
-              :class="{
-                'navigation__label--small': item.labelSize === 'small',
-                'navigation__label--large': item.labelSize === 'large',
-              }"
-            >
+            <div v-if="item.label" class="navigation__label" :class="{
+              'navigation__label--small': item.labelSize === 'small',
+              'navigation__label--large': item.labelSize === 'large',
+            }">
               <span>{{ item.label }}</span>
               <div v-if="item.children" class="navigation__dropdown-arrow">
                 <font-awesome-icon icon="chevron-down" />
               </div>
             </div>
           </div>
-          <div
-            v-if="item.url && parseInt(height || '0') >= 80 && !item.hideExternalOpen"
-            class="navigation__external-link"
-            @click.stop="openUrl(item.url)"
-          >
+          <div v-if="item.url && parseInt(height || '0') >= 80 && !item.hideExternalOpen"
+            class="navigation__external-link" @click.stop="openUrl(item.url)">
             <font-awesome-icon icon="square-up-right" />
           </div>
-          <div
-            v-if="item.children && isDropdownOpen(item.id)"
-            class="navigation__dropdown-content"
-            :class="{
-              'navigation__dropdown-content--start': item.alignment === 'start',
-              'navigation__dropdown-content--end': item.alignment === 'end',
-            }"
-          >
-            <div
-              v-for="child in item.children"
-              :key="child.id"
-              class="navigation__dropdown-item"
-              :class="{
-                'navigation__dropdown-item--disabled': child.disabled,
-              }"
-              @click="(e) => handleItemClick(child, e)"
-            >
+          <div v-if="item.children && isDropdownOpen(item.id)" class="navigation__dropdown-content" :class="{
+            'navigation__dropdown-content--start': item.alignment === 'start',
+            'navigation__dropdown-content--end': item.alignment === 'end',
+          }">
+            <div v-for="child in item.children" :key="child.id" class="navigation__dropdown-item" :class="{
+              'navigation__dropdown-item--disabled': child.disabled,
+            }" @click="(e) => handleItemClick(child, e)">
               <div v-if="child.icon" class="navigation__icon">
-                <img
-                  v-if="child.icon.startsWith('img:')"
-                  :src="child.icon.substring(4)"
-                  :alt="child.label || 'Icon'"
-                  class="navigation__icon-image"
-                />
+                <img v-if="child.icon.startsWith('img:')" :src="child.icon.substring(4)" :alt="child.label || 'Icon'"
+                  class="navigation__icon-image" />
                 <font-awesome-icon v-else :icon="child.icon" />
               </div>
-              <div
-                v-if="child.label"
-                class="navigation__label"
-                :class="{
-                  'navigation__label--small': child.labelSize === 'small',
-                  'navigation__label--large': child.labelSize === 'large',
-                }"
-              >
+              <div v-if="child.label" class="navigation__label" :class="{
+                'navigation__label--small': child.labelSize === 'small',
+                'navigation__label--large': child.labelSize === 'large',
+              }">
                 {{ child.label }}
               </div>
             </div>
@@ -128,93 +86,54 @@
 
     <template v-else>
       <div class="navigation__dropdowns">
-        <div
-          v-for="item in items"
-          :key="item.id"
-          class="navigation__dropdown"
-          :class="[
-            { 'navigation__dropdown--active': item.id === activeItem },
-            { 'navigation__dropdown--disabled': item.disabled },
-            { 'navigation__dropdown--start': item.alignment === 'start' },
-            { 'navigation__dropdown--end': item.alignment === 'end' },
-            { 'navigation__dropdown--open': isDropdownOpen(item.id) },
-          ]"
-          :style="{
-            '--item-alignment': item.alignment || activeItemAlignment,
-          }"
-        >
-          <div
-            class="navigation__dropdown-header"
-            :class="{
-              'navigation__dropdown-header--icon-only': !item.label,
-              'navigation__dropdown-header--large-icon': iconSize === 'large' && item.icon,
-            }"
-            @click="(e) => handleItemClick(item, e)"
-          >
+        <div v-for="item in items" :key="item.id" class="navigation__dropdown" :class="[
+          { 'navigation__dropdown--active': item.id === activeItem },
+          { 'navigation__dropdown--disabled': item.disabled },
+          { 'navigation__dropdown--start': item.alignment === 'start' },
+          { 'navigation__dropdown--end': item.alignment === 'end' },
+          { 'navigation__dropdown--open': isDropdownOpen(item.id) },
+        ]" :style="{
+                  '--item-alignment': item.alignment || activeItemAlignment,
+                }">
+          <div class="navigation__dropdown-header" :class="{
+            'navigation__dropdown-header--icon-only': !item.label,
+            'navigation__dropdown-header--large-icon': iconSize === 'large' && item.icon,
+          }" @click="(e) => handleItemClick(item, e)">
             <div v-if="item.icon" class="navigation__icon">
-              <img
-                v-if="item.icon.startsWith('img:')"
-                :src="item.icon.substring(4)"
-                :alt="item.label || 'Icon'"
-                class="navigation__icon-image"
-              />
+              <img v-if="item.icon.startsWith('img:')" :src="item.icon.substring(4)" :alt="item.label || 'Icon'"
+                class="navigation__icon-image" />
               <font-awesome-icon v-else :icon="item.icon" />
             </div>
-            <div
-              v-if="item.label"
-              class="navigation__label"
-              :class="{
-                'navigation__label--small': item.labelSize === 'small',
-                'navigation__label--large': item.labelSize === 'large',
-              }"
-            >
+            <div v-if="item.label" class="navigation__label" :class="{
+              'navigation__label--small': item.labelSize === 'small',
+              'navigation__label--large': item.labelSize === 'large',
+            }">
               <span>{{ item.label }}</span>
               <div v-if="item.children" class="navigation__dropdown-arrow">
                 <font-awesome-icon icon="chevron-down" />
               </div>
             </div>
           </div>
-          <div
-            v-if="item.url && parseInt(height || '0') >= 80 && !item.hideExternalOpen"
-            class="navigation__external-link"
-            @click.stop="openUrl(item.url)"
-          >
+          <div v-if="item.url && parseInt(height || '0') >= 80 && !item.hideExternalOpen"
+            class="navigation__external-link" @click.stop="openUrl(item.url)">
             <font-awesome-icon icon="square-up-right" />
           </div>
-          <div
-            v-if="item.children && isDropdownOpen(item.id)"
-            class="navigation__dropdown-content"
-            :class="{
-              'navigation__dropdown-content--start': item.alignment === 'start',
-              'navigation__dropdown-content--end': item.alignment === 'end',
-            }"
-          >
-            <div
-              v-for="child in item.children"
-              :key="child.id"
-              class="navigation__dropdown-item"
-              :class="{
-                'navigation__dropdown-item--disabled': child.disabled,
-              }"
-              @click="(e) => handleItemClick(child, e)"
-            >
+          <div v-if="item.children && isDropdownOpen(item.id)" class="navigation__dropdown-content" :class="{
+            'navigation__dropdown-content--start': item.alignment === 'start',
+            'navigation__dropdown-content--end': item.alignment === 'end',
+          }">
+            <div v-for="child in item.children" :key="child.id" class="navigation__dropdown-item" :class="{
+              'navigation__dropdown-item--disabled': child.disabled,
+            }" @click="(e) => handleItemClick(child, e)">
               <div v-if="child.icon" class="navigation__icon">
-                <img
-                  v-if="child.icon.startsWith('img:')"
-                  :src="child.icon.substring(4)"
-                  :alt="child.label || 'Icon'"
-                  class="navigation__icon-image"
-                />
+                <img v-if="child.icon.startsWith('img:')" :src="child.icon.substring(4)" :alt="child.label || 'Icon'"
+                  class="navigation__icon-image" />
                 <font-awesome-icon v-else :icon="child.icon" />
               </div>
-              <div
-                v-if="child.label"
-                class="navigation__label"
-                :class="{
-                  'navigation__label--small': child.labelSize === 'small',
-                  'navigation__label--large': child.labelSize === 'large',
-                }"
-              >
+              <div v-if="child.label" class="navigation__label" :class="{
+                'navigation__label--small': child.labelSize === 'small',
+                'navigation__label--large': child.labelSize === 'large',
+              }">
                 {{ child.label }}
               </div>
             </div>
@@ -227,8 +146,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { NavigationProps, NavigationItem } from '../types/navigation'
+import type { NavigationProps, NavigationItem } from '../types/navigation'
 
 const props = defineProps<NavigationProps>()
 const emit = defineEmits<{
@@ -334,11 +252,13 @@ onUnmounted(() => {
   transition: all 0.2s ease;
   background: transparent;
   height: 100%;
+  overflow: hidden;
 }
 
 .navigation__tile:hover {
   border-color: var(--navigation-hover-color);
   color: var(--navigation-hover-color);
+  overflow: visible;
 
   .navigation__tile-content {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -347,6 +267,7 @@ onUnmounted(() => {
 }
 
 .navigation__tile--active {
+  overflow: visible;
   border-color: var(--navigation-active-color);
   color: var(--navigation-active-color);
   background-color: var(--navigation-active-background-color);
@@ -584,10 +505,24 @@ onUnmounted(() => {
 .navigation__label {
   white-space: nowrap;
   text-align: center;
-  display: flex;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
+  max-width: 100%;
+
+  .navigation__dropdown-arrow {
+    display: inline-block;
+  }
+}
+
+.navigation__tile:hover .navigation__label,
+.navigation__tile--active .navigation__label {
+  text-overflow: unset;
+  overflow: visible;
+  max-width: unset;
 }
 
 .navigation__label--small {

package/src/main.ts

@@ -10,7 +10,7 @@ import router from './router'
 import './assets/colors.css'
 import './assets/main.css'
 
-// Add all solid icons to the library
+// Add all solid and regular icons to the library
 library.add(fas, far)
 
 const app = createApp(App)

package/src/router/index.ts

@@ -4,6 +4,7 @@ import FileUploadTestView from '../views/FileUploadTestView.vue'
 import ActionTestView from '../views/ActionTestView.vue'
 import DashboardView from '../views/DashboardView.vue'
 import NavigationTestView from '../views/NavigationTestView.vue'
+import DropdownTestView from '../views/DropdownTestView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -38,6 +39,12 @@ const router = createRouter({
       component: NavigationTestView,
       meta: { title: 'Navigation Test' },
     },
+    {
+      path: '/dropdown',
+      name: 'dropdown',
+      component: DropdownTestView,
+      meta: { title: 'Dropdown Test' },
+    },
   ],
 })
 

package/src/types/dropdown.ts

@@ -0,0 +1,25 @@
+export interface DropdownOption {
+  id: string
+  label: string
+  disabled?: boolean
+}
+
+export interface DropdownProps {
+  options: DropdownOption[]
+  modelValue: string | string[]
+  multiple?: boolean
+  placeholder?: string
+  filterable?: boolean
+  disabled?: boolean
+  maxHeight?: string
+  width?: string
+  color?: string
+  hoverColor?: string
+  activeColor?: string
+  disabledColor?: string
+  backgroundColor?: string
+  borderRadius?: string
+  padding?: string
+  icon?: string
+  iconSize?: 'normal' | 'large'
+}

package/src/views/DashboardView.vue

@@ -30,6 +30,13 @@
           <p>Test the navigation component</p>
         </div>
       </router-link>
+      <router-link to="/dropdown" class="tile">
+        <div class="tile-content">
+          <font-awesome-icon icon="chevron-down" class="tile-icon" />
+          <h2>Dropdown</h2>
+          <p>Test the dropdown component with single/multiple selection and filtering</p>
+        </div>
+      </router-link>
     </div>
   </div>
 </template>

package/src/views/DropdownTestView.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="dropdown-test">
+    <div class="dropdown-test__back">
+      <router-link to="/" class="back-link"> ← Back to Dashboard </router-link>
+    </div>
+
+    <div class="dropdown-test__section">
+      <h2>Single Select Dropdown</h2>
+      <Dropdown v-model="selectedSingle" :options="options" placeholder="Select a color" filterable
+        @update:modelValue="handleSingleChange" />
+      <div v-if="selectedSingle" class="selection-info">
+        Selected: {{ getOptionLabel(selectedSingle) }}
+      </div>
+    </div>
+
+    <div class="dropdown-test__section">
+      <h2>Multiple Select Dropdown</h2>
+      <Dropdown v-model="selectedMultiple" :options="options" multiple filterable placeholder="Select colors"
+        icon="paintbrush" @update:modelValue="handleMultipleChange" color="#aa0000" />
+      <div v-if="selectedMultiple.length" class="selection-info">
+        Selected: {{ getSelectedLabels(selectedMultiple).join(', ') }}
+      </div>
+    </div>
+
+    <div class="dropdown-test__section">
+      <h2>Dropdown with Icon</h2>
+      <Dropdown v-model="selectedWithIcon" :options="options" placeholder="Select with icon" icon="house"
+        @update:modelValue="handleIconChange" />
+      <div v-if="selectedWithIcon" class="selection-info">
+        Selected: {{ getOptionLabel(selectedWithIcon) }}
+      </div>
+    </div>
+
+    <div class="dropdown-test__section">
+      <h2>Dropdown with Large Icon</h2>
+      <Dropdown v-model="selectedWithLargeIcon" :options="options" placeholder="Select with large icon"
+        icon="gauge-high" iconSize="large" @update:modelValue="handleLargeIconChange" />
+      <div v-if="selectedWithLargeIcon" class="selection-info">
+        Selected: {{ getOptionLabel(selectedWithLargeIcon) }}
+      </div>
+    </div>
+
+    <div class="dropdown-test__section">
+      <h2>Custom Styled Dropdown</h2>
+      <Dropdown v-model="selectedCustom" :options="options" placeholder="Select with 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="dropdown-test__section">
+      <h2>Disabled Dropdown</h2>
+      <Dropdown v-model="selectedDisabled" :options="options" disabled placeholder="This dropdown is disabled" />
+    </div>
+
+    <div class="dropdown-test__section">
+      <h2>Dropdown with Disabled Options</h2>
+      <Dropdown v-model="selectedWithDisabled" :options="optionsWithDisabled" placeholder="Some options are disabled"
+        @update:modelValue="handleDisabledChange" />
+      <div v-if="selectedWithDisabled" class="selection-info">
+        Selected: {{ getOptionLabel(selectedWithDisabled) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { DropdownOption } from '../types/dropdown'
+import Dropdown from '@/components/Dropdown.vue'
+
+const options: DropdownOption[] = [
+  { id: 'red', label: 'Red' },
+  { id: 'blue', label: 'Blue' },
+  { id: 'green', label: 'Green' },
+  { id: 'yellow', label: 'Yellow' },
+  { id: 'purple', label: 'Purple' },
+  { id: 'orange', label: 'Orange' },
+  { id: 'pink', label: 'Pink' },
+  { id: 'brown', label: 'Brown' },
+  { id: 'gray', label: 'Gray' },
+  { id: 'black', label: 'Black' },
+]
+
+const optionsWithDisabled: DropdownOption[] = [
+  { 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('')
+const selectedMultiple = ref<string[]>([])
+const selectedCustom = ref('')
+const selectedDisabled = ref('')
+const selectedWithDisabled = ref('')
+const selectedWithIcon = ref('')
+const selectedWithLargeIcon = ref('')
+
+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 handleIconChange = (value: string | string[]) => {
+  if (typeof value === 'string') {
+    console.log('Selection with icon changed:', value)
+  }
+}
+
+const handleLargeIconChange = (value: string | string[]) => {
+  if (typeof value === 'string') {
+    console.log('Selection with large icon changed:', value)
+  }
+}
+</script>
+
+<style scoped>
+.dropdown-test {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+  margin-bottom: 5rem;
+}
+
+.dropdown-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;
+}
+
+.dropdown-test__section {
+  margin-bottom: 3rem;
+}
+
+.dropdown-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>