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

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>