@a-vision-software/vue-input-components 1.3.24 → 1.3.26

package/src/types/checkbox.ts

@@ -1,12 +1,12 @@
 export interface CheckboxOption {
-  id: string
-  label: string
+  id: string | boolean
+  label?: string | null
   disabled?: boolean
 }
 
 export interface CheckboxProps {
-  options: CheckboxOption[]
-  modelValue: string | string[]
+  options?: CheckboxOption[]
+  modelValue: string | string[] | boolean
   multiple?: boolean
   disabled?: boolean
   width?: string
@@ -29,3 +29,7 @@ export interface CheckboxProps {
   columns?: number
   presentation?: 'default' | 'minimal'
 }
+
+export interface ListCheckboxProps extends CheckboxProps {
+  onCheckboxClick: (row: any, itemKey: string) => void
+}

package/src/types/index.ts

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

package/src/types/list.ts

@@ -1,3 +1,5 @@
+import { ListActionProps } from './action'
+
 export type ListPresentation = 'default' | 'minimal'
 
 export type ListDataType = 'text' | 'number' | 'date' | 'action' | 'checkbox' | 'icon'
@@ -5,18 +7,13 @@ export type ListDataType = 'text' | 'number' | 'date' | 'action' | 'checkbox' |
 export interface ListColumn {
   key: string
   label: string
-  type: ListDataType
+  type?: 'text' | 'number' | 'date' | 'action' | 'checkbox' | 'icon'
+  align?: 'left' | 'center' | 'right'
   sortable?: boolean
   filterable?: boolean
   width?: string
-  align?: 'left' | 'center' | 'right'
-}
-
-export interface ListAction {
-  label: string
-  icon?: string
-  onClick: () => void
-  disabled?: boolean
+  minWidth?: string
+  maxWidth?: string
 }
 
 export interface ListFilter {
@@ -27,17 +24,20 @@ export interface ListFilter {
 export interface ListProps {
   columns: ListColumn[]
   data: any[]
-  presentation?: ListPresentation
-  filter?: ListFilter
-  actions?: ListAction[]
+  actions?: ListActionProps[]
+  filter?: {
+    placeholder?: string
+  }
   loading?: boolean
   emptyMessage?: string
+  presentation?: 'default' | 'minimal'
+  width?: string
 }
 
 export interface ListEmits {
   (e: 'update:filter', value: string): void
-  (e: 'sort', column: ListColumn, direction: 'asc' | 'desc'): void
   (e: 'row-click', row: any, index: number): void
+  (e: 'row-dblclick', row: any, index: number): void
 }
 
 export interface ListComponent {
@@ -45,3 +45,8 @@ export interface ListComponent {
   blur: () => void
   clearFilter: () => void
 }
+
+export interface ListIconProps {
+  icon: string
+  color?: string
+}

package/src/views/DashboardView.vue

@@ -39,8 +39,18 @@
         <span class="dashboard__description">Single and multiple selection checkboxes</span>
       </router-link>
       <router-link to="/list" class="dashboard__item">
-        <FontAwesomeIcon :icon="['fas', 'list']" class="dashboard__icon" />
+        <div class="dashboard__icon-wrapper">
+          <font-awesome-icon icon="list" class="dashboard__icon" />
+        </div>
         <span class="dashboard__label">List</span>
+        <span class="dashboard__description">Configurable data lists with sorting and filtering</span>
+      </router-link>
+      <router-link to="/action" class="dashboard__item">
+        <div class="dashboard__icon-wrapper">
+          <font-awesome-icon icon="bolt" class="dashboard__icon" />
+        </div>
+        <span class="dashboard__label">Action</span>
+        <span class="dashboard__description">Interactive buttons and links with various styles</span>
       </router-link>
     </div>
   </div>
@@ -54,37 +64,37 @@
 .dashboard {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 3rem 2rem;
+  padding: 2rem 1.5rem;
 }
 
 .dashboard h1 {
   text-align: center;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
   color: #2d3748;
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 700;
 }
 
 .dashboard__subtitle {
   text-align: center;
   color: #718096;
-  font-size: 1.1rem;
-  margin-bottom: 3rem;
+  font-size: 1rem;
+  margin-bottom: 2rem;
 }
 
 .dashboard__grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 2rem;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.5rem;
 }
 
 .dashboard__item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 2rem;
+  padding: 1.5rem;
   background-color: #ffffff;
-  border-radius: 1rem;
+  border-radius: 0.75rem;
   text-decoration: none;
   color: #2d3748;
   transition: all 0.3s ease;
@@ -93,37 +103,37 @@
 }
 
 .dashboard__item:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   border-color: #4a90e2;
 }
 
 .dashboard__icon-wrapper {
-  width: 64px;
-  height: 64px;
+  width: 48px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #ebf8ff;
   border-radius: 50%;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .dashboard__icon {
-  font-size: 2rem;
+  font-size: 1.5rem;
   color: #4a90e2;
 }
 
 .dashboard__label {
-  font-size: 1.25rem;
+  font-size: 1.1rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
 }
 
 .dashboard__description {
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   color: #718096;
   text-align: center;
-  line-height: 1.5;
+  line-height: 1.4;
 }
 </style>

package/src/views/ListTestView.vue

@@ -1,19 +1,25 @@
 <template>
   <div class="list-test">
-    <h1>List Component Test</h1>
+    <div class="list-test__header">
+      <router-link to="/" class="list-test__back">
+        <font-awesome-icon :icon="['fas', 'arrow-left']" />
+        <span>Back to Dashboard</span>
+      </router-link>
+      <h1>List Component Test</h1>
+    </div>
 
     <!-- Default Presentation -->
     <section class="list-test__section">
       <h2>Default Presentation</h2>
-      <List :columns="columns" :data="data" :filter="{ placeholder: 'Search users...' }" :actions="actions"
-        @update:filter="handleFilter" @sort="handleSort" @row-click="handleRowClick" />
+      <List :actions="listActions" :columns="columns" :data="data" :filter="{ placeholder: 'Search users...' }"
+        @row-click="handleRowClick" @row-dblclick="handleRowDblClick" />
     </section>
 
     <!-- Minimal Presentation -->
     <section class="list-test__section">
       <h2>Minimal Presentation</h2>
-      <List :columns="columns" :data="data" presentation="minimal" :filter="{ placeholder: 'Search users...' }"
-        @update:filter="handleFilter" @sort="handleSort" @row-click="handleRowClick" />
+      <List :actions="listActions" :columns="columns" :data="data" presentation="minimal" width="50em"
+        :filter="{ placeholder: 'Search users...' }" @row-click="handleRowClick" @row-dblclick="handleRowDblClick" />
     </section>
 
     <!-- Loading State -->
@@ -32,10 +38,73 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { List } from '@/components/List'
-import type { ListColumn, ListAction } from '../types/list'
+import List from '@/components/List.vue'
+import type { ListColumn, ListActionProps, ListCheckboxProps, ListIconProps } from '@/types'
+
+const autosaveActive = (info: any) => {
+  console.log('Autosave active', info)
+}
+
+const listActionClick = (row: any, action: ListActionProps) => {
+  if (!row && action) {
+    console.log('List action clicked:', row, action)
+  }
+}
+
+const selectClick = (row: any, itemKey: string) => {
+  if (row && itemKey) {
+    console.log('Select clicked:', row, itemKey)
+  }
+}
+
+const rowActionClick = (row: any, action: ListActionProps) => {
+  if (row && action) {
+    console.log('Action clicked:', row, action)
+  }
+}
+
+const handleRowClick = (row: any, index: number) => {
+  console.log('Row clicked:', row, index)
+  if (row?.select) {
+    row.select.modelValue = !row.select.modelValue
+  } else {
+    row.selected = !row.selected
+  }
+}
+
+const handleRowDblClick = (row: any, index: number) => {
+  console.log('Row double-clicked:', row, index)
+}
+
+const listActions = ref<ListActionProps[]>([
+  {
+    id: 'new-user',
+    label: 'New user',
+    icon: 'add',
+    color: 'var(--primary-color)',
+    onActionClick: listActionClick
+  }
+])
 
 const columns: ListColumn[] = [
+  {
+    key: 'select',
+    label: '',
+    type: 'checkbox',
+    sortable: false,
+    filterable: false,
+    align: 'center',
+    width: '4rem'
+  },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'icon',
+    sortable: false,
+    filterable: false,
+    align: 'center',
+    width: '4rem'
+  },
   {
     key: 'name',
     label: 'Name',
@@ -54,82 +123,270 @@ const columns: ListColumn[] = [
     key: 'joined',
     label: 'Joined',
     type: 'date',
-    sortable: true
+    sortable: true,
+    width: '6rem'
   },
   {
     key: 'active',
     label: 'Active',
     type: 'checkbox',
-    align: 'center'
+    align: 'center',
+    width: '4rem'
   },
   {
     key: 'actions',
     label: 'Actions',
     type: 'action',
-    align: 'right'
+    align: 'right',
+    width: '12rem'
   }
 ]
 
 const data = ref([
   {
+    selected: false,
+    select: <ListCheckboxProps>{
+      modelValue: false,
+      disabled: false,
+      onCheckboxClick: selectClick
+    },
+    status: <ListIconProps>{
+      icon: 'star',
+      color: 'lightgray',
+    },
     name: 'John Doe',
     email: 'john@example.com',
     joined: '2023-01-15',
     active: {
       modelValue: true,
-      disabled: false
+      disabled: false,
+      autosave: autosaveActive,
+      onCheckboxClick: selectClick
     },
-    actions: {
-      label: 'Edit',
-      icon: 'edit',
-      onClick: () => console.log('Edit John')
-    }
+    actions: <ListActionProps[]>[
+      {
+        id: 'edit',
+        label: 'Edit',
+        icon: 'edit',
+        onActionClick: rowActionClick
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: 'trash',
+        color: 'var(--danger-color)',
+        onActionClick: rowActionClick
+      }
+    ]
   },
   {
+    selected: false,
+    select: <ListCheckboxProps>{
+      modelValue: false,
+      disabled: false,
+      onCheckboxClick: selectClick
+    },
+    status: <ListIconProps>{
+      icon: 'star',
+      color: 'gold',
+    },
     name: 'Jane Smith',
     email: 'jane@example.com',
     joined: '2023-02-20',
-    active: {
+    active: <ListCheckboxProps>{
       modelValue: false,
+      disabled: false,
+      autosave: autosaveActive
+    },
+    actions: <ListActionProps[]>[
+      {
+        id: 'edit',
+        label: 'Edit',
+        icon: 'edit',
+        onActionClick: rowActionClick
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: 'trash',
+        onActionClick: rowActionClick
+      }
+    ]
+  },
+  {
+    select: <ListCheckboxProps>{
+      modelValue: false,
+      disabled: false,
+      onCheckboxClick: selectClick
+    },
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    joined: '2024-01-10',
+    active: <ListCheckboxProps>{
+      modelValue: true,
       disabled: false
     },
-    actions: {
-      label: 'Edit',
-      icon: 'edit',
-      onClick: () => console.log('Edit Jane')
-    }
-  }
-])
-
-const actions: ListAction[] = [
+    actions: <ListActionProps[]>[
+      {
+        id: 'edit',
+        label: 'Edit',
+        icon: 'edit',
+        onActionClick: rowActionClick
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: 'trash',
+        disabled: true,
+        onActionClick: rowActionClick
+      }
+    ]
+  },
+  {
+    name: 'Bob Wilson',
+    email: 'bob@example.com',
+    joined: '2023-11-05',
+    active: <ListCheckboxProps>{
+      modelValue: true,
+      disabled: true
+    },
+    actions: <ListActionProps[]>[
+      {
+        id: 'view',
+        label: 'View',
+        icon: 'eye',
+        onActionClick: rowActionClick
+      }
+    ]
+  },
+  {
+    select: <ListCheckboxProps>{
+      modelValue: false,
+      disabled: false,
+      onCheckboxClick: selectClick
+    },
+    name: 'Carol Brown',
+    email: 'carol@example.com',
+    joined: '2023-08-30',
+    active: <ListCheckboxProps>{
+      modelValue: false,
+      disabled: false
+    },
+    actions: <ListActionProps[]>[
+      {
+        id: 'edit',
+        label: 'Edit',
+        icon: 'edit',
+        onActionClick: rowActionClick
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: 'trash',
+        onActionClick: rowActionClick
+      }
+    ]
+  },
   {
-    label: 'Add User',
-    icon: 'plus',
-    onClick: () => console.log('Add user')
+    select: <ListCheckboxProps>{
+      modelValue: false,
+      disabled: false,
+      onCheckboxClick: selectClick
+    },
+    name: 'David Miller',
+    email: 'david@example.com',
+    joined: '2024-02-01',
+    active: <ListCheckboxProps>{
+      modelValue: true,
+      disabled: false
+    },
+    actions: <ListActionProps[]>[
+      {
+        id: 'edit',
+        label: 'Edit',
+        icon: 'edit',
+        onActionClick: rowActionClick
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: 'trash',
+        onActionClick: rowActionClick
+      }
+    ]
+  },
+  {
+    select: <ListCheckboxProps>{
+      modelValue: false,
+      disabled: false,
+      onCheckboxClick: selectClick
+    },
+    name: 'Eva Garcia',
+    email: 'eva@example.com',
+    joined: '2023-05-15',
+    active: {
+      modelValue: true,
+      disabled: false
+    },
+    actions: <ListActionProps[]>[
+      {
+        id: 'view',
+        label: 'View',
+        icon: 'eye',
+        onActionClick: rowActionClick
+      }
+    ]
   },
   {
-    label: 'Export',
-    icon: 'download',
-    onClick: () => console.log('Export')
+    select: <ListCheckboxProps>{
+      modelValue: false,
+      disabled: false,
+      onCheckboxClick: selectClick
+    },
+    name: 'Frank Lee',
+    email: 'frank@example.com',
+    joined: '2023-12-20',
+    active: {
+      modelValue: false,
+      disabled: true
+    },
+    actions: <ListActionProps[]>[
+      {
+        id: 'view',
+        label: 'View',
+        icon: 'eye',
+        onActionClick: rowActionClick
+      }
+    ]
   }
-]
+])
 
-const handleFilter = (value: string) => {
-  console.log('Filter:', value)
+</script>
+
+<style scoped>
+.list-test {
+  padding: 2rem;
 }
 
-const handleSort = (column: ListColumn, direction: 'asc' | 'desc') => {
-  console.log('Sort:', column.key, direction)
+.list-test__header {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  margin-bottom: 2rem;
 }
 
-const handleRowClick = (row: any, index: number) => {
-  console.log('Row clicked:', row, index)
+.list-test__back {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s;
 }
-</script>
 
-<style scoped>
-.list-test {
-  padding: 2rem;
+.list-test__back:hover {
+  color: var(--primary);
 }
 
 .list-test__section {