@a-vision-software/vue-input-components 1.4.6 → 1.4.7

package/package.json

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

package/src/components/Action.vue

@@ -21,19 +21,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-
-interface ActionProps {
-  id?: string
-  icon?: string
-  label?: string
-  href?: string
-  type?: 'button' | 'submit' | 'reset'
-  disabled?: boolean
-  color?: string
-  size?: 'small' | 'regular' | 'large'
-  variant?: 'solid' | 'transparent'
-  presentation?: 'default' | 'minimal'
-}
+import type { ActionProps } from '@/types/action'
 
 const props = withDefaults(defineProps<ActionProps>(), {
   id: undefined,

package/src/components/List.vue

@@ -88,8 +88,9 @@
               </template>
               <template v-else-if="column.type === 'action'">
                 <div class="list__row-actions" v-if="row[column.key]">
-                  <Action v-for="(action, actionIndex) in row[column.key]" :key="actionIndex" v-bind="action"
-                    :href="presentation === 'minimal' && !action.href ? `#/${action.id ? action.id : action.label.toLowerCase()}` : action.href"
+                  <Action v-for="(action, actionIndex) in row[column.key] as ListAction[]" :key="actionIndex"
+                    v-bind="action"
+                    :href="presentation === 'minimal' && !action.href ? `#/${action.id ? action.id : action.label?.toLowerCase()}` : action.href"
                     @click.stop="action.onActionClick ? action.onActionClick(row, action) : null"
                     :presentation="presentation" size="small" :color="presentation === 'minimal' ? 'inherit' : ''" />
                 </div>
@@ -117,7 +118,7 @@ import { ref, computed, watch } from 'vue'
 import TextInput from './TextInput.vue'
 import Action from './Action.vue'
 import Checkbox from './Checkbox.vue'
-import type { ListProps, ListEmits, ListColumn } from '../types/list'
+import type { ListProps, ListEmits, ListColumn, ListAction } from '../types/list'
 import { config } from '../config'
 
 const props = withDefaults(defineProps<ListProps>(), {
@@ -366,6 +367,9 @@ defineExpose({
 
 .list__cell {
   padding: 0.75rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .list__column--sortable {

package/src/types/action.ts

@@ -1,4 +1,14 @@
-export interface ActionProps {
+/*******************************************************************************
+ * (c) 2025 Copyright A-Vision Software
+ *
+ * File description :        Action types
+ *
+ * Created by       :        Arnold Velzel
+ * Created on       :        26-05-2025
+ *
+ *******************************************************************************/
+
+interface ActionProps {
   id?: string
   icon?: string
   label?: string
@@ -11,11 +21,13 @@ export interface ActionProps {
   presentation?: 'default' | 'minimal'
 }
 
-export interface ListActionProps extends ActionProps {
+interface ListActionProps extends ActionProps {
   onActionClick: (row: any, action: any) => void
 }
 
-export interface ActionComponent {
+interface ActionComponent {
   focus: () => void
   blur: () => void
 }
+
+export type { ActionProps, ListActionProps, ActionComponent }

package/src/types/list.ts

@@ -1,13 +1,23 @@
 import { ListActionProps } from './action'
 
-export type ListPresentation = 'default' | 'minimal'
+type ListPresentation = 'default' | 'minimal'
 
-export type ListDataType = 'text' | 'number' | 'date' | 'action' | 'checkbox' | 'icon'
+type ListDataType = 'text' | 'number' | 'date' | 'action' | 'checkbox' | 'icon'
 
-export interface ListColumn {
+interface ListAction {
+  id: string
+  label?: string
+  icon?: string
+  color?: string
+  href?: string
+  onClick?: (item: any) => void
+  onActionClick?: (item: any, action: any) => void
+}
+
+interface ListColumn {
   key: string
   label: string
-  type?: 'text' | 'number' | 'date' | 'action' | 'checkbox' | 'icon'
+  type?: ListDataType
   align?: 'left' | 'center' | 'right'
   sortable?: boolean
   filterable?: boolean
@@ -16,12 +26,12 @@ export interface ListColumn {
   maxWidth?: string
 }
 
-export interface ListFilter {
+interface ListFilter {
   placeholder?: string
   debounce?: number
 }
 
-export interface ListProps {
+interface ListProps {
   columns: ListColumn[]
   data: any[]
   actions?: ListActionProps[]
@@ -34,19 +44,30 @@ export interface ListProps {
   width?: string
 }
 
-export interface ListEmits {
+interface ListEmits {
   (e: 'update:filter', value: string): void
   (e: 'row-click', row: any, index: number): void
   (e: 'row-dblclick', row: any, index: number): void
 }
 
-export interface ListComponent {
+interface ListComponent {
   focus: () => void
   blur: () => void
   clearFilter: () => void
 }
 
-export interface ListIconProps {
+interface ListIconProps {
   icon: string
   color?: string
 }
+
+export type {
+  ListPresentation,
+  ListProps,
+  ListAction,
+  ListEmits,
+  ListComponent,
+  ListIconProps,
+  ListColumn,
+  ListFilter,
+}