@a-vision-software/vue-input-components 1.4.25 → 1.4.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-vision-software/vue-input-components",
-  "version": "1.4.25",
+  "version": "1.4.27",
   "description": "A collection of reusable Vue 3 input components with TypeScript support",
   "author": "A-Vision Software",
   "license": "MIT",
@@ -54,14 +54,21 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "floating-vue": "^5.2.2"
+  },
+  "peerDependenciesMeta": {
+    "floating-vue": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.0",
     "@fortawesome/free-regular-svg-icons": "^6.7.0",
     "@fortawesome/free-solid-svg-icons": "^6.7.0",
     "@fortawesome/vue-fontawesome": "^3.0.0",
-    "@vuepic/vue-datepicker": "^11.0.2"
+    "@vuepic/vue-datepicker": "^11.0.2",
+    "floating-vue": "^5.2.2"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.2",

package/src/assets/colors.css

@@ -33,6 +33,7 @@
   --disabled-background: #f5f7fa;
   --card-bg: #ffffff;
   --background-color: #f8f9fa;
+  --tooltip-bg-color: #ffeba1;
 
   /* Input colors */
   --input-bg-color: rgba(255, 255, 255, 0.8);
@@ -73,4 +74,4 @@
   --success-text-color: var(--success-color);
   --error-bg-color: var(--error-color-light);
   --error-text-color: var(--error-color);
-}
+}

package/src/assets/main.css

@@ -148,6 +148,14 @@ a:hover {
   }
 }
 
+/* Tooltip styles (floating-vue) */
+.v-popper--theme-tooltip .v-popper__inner {
+  background: var(--tooltip-bg-color);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  font-size: 14px;
+}
+
 /* Print styles */
 @media print {
   body {

package/src/components/List.vue

@@ -168,11 +168,15 @@
                 {{ formatTime(row[column.key]) }}
               </template>
               <template v-else-if="column.type === 'action'">
-                <div class="list__row-actions" v-if="row[column.key]">
+                <div
+                  class="list__row-actions"
+                  v-if="row[column.key]"
+                >
                   <Action
-                    v-for="(action, actionIndex) in row[column.key] as ListAction[]"
+                    v-for="(action, actionIndex) in row[column.key] as ListActionProps[]"
                     :key="actionIndex"
                     v-bind="action"
+                    v-tooltip="getActionTooltip(action)"
                     :href="
                       presentation === 'minimal' && !action.href
                         ? `#/${action.id ? action.id : action.label?.toLowerCase()}`
@@ -219,7 +223,8 @@ 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, ListAction, ListRowData } from '../types/list'
+import type { ListProps, ListEmits, ListColumn, ListRowData } from '../types/list'
+import type { ListActionProps } from '../types/action'
 import { config } from '../config'
 
 const props = withDefaults(defineProps<ListProps>(), {
@@ -447,6 +452,12 @@ const getCellClasses = (row: any, column: ListColumn) => {
     })
     .join(' ')
 }
+
+function getActionTooltip(action: ListActionProps) {
+  const tooltip = action?.tooltip
+  if (!tooltip) return false
+  return { content: tooltip, html: true }
+}
 </script>
 
 <style scoped>

package/src/main.ts

@@ -3,6 +3,8 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { far } from '@fortawesome/free-regular-svg-icons'
+import FloatingVue from 'floating-vue'
+import 'floating-vue/dist/style.css'
 
 import App from './App.vue'
 import router from './router'
@@ -16,6 +18,7 @@ library.add(fas, far)
 const app = createApp(App)
 
 app.use(router)
+app.use(FloatingVue)
 app.component('font-awesome-icon', FontAwesomeIcon)
 
 app.mount('#app')

package/src/types/action.ts

@@ -19,6 +19,7 @@ interface ActionProps {
   variant?: 'solid' | 'transparent'
   size?: 'small' | 'regular' | 'large'
   presentation?: 'default' | 'minimal'
+  tooltip?: string
 }
 
 interface ListActionProps extends ActionProps {

package/src/views/ListTestView.vue

@@ -5,7 +5,7 @@
         <font-awesome-icon :icon="['fas', 'arrow-left']" />
         <span>Back to Dashboard</span>
       </router-link>
-      <h1>List Component Test</h1>
+      <h1 v-tooltip="'List Component Test'">List Component Test</h1>
     </div>
 
     <!-- Default Presentation -->
@@ -114,6 +114,7 @@ const listActions = ref<ListActionProps[]>([
     label: 'New user',
     icon: 'add',
     color: 'var(--primary-color)',
+    tooltip: 'Create a new user account',
     onActionClick: listActionClick,
   },
 ])
@@ -212,6 +213,7 @@ const data = ref<ListRowData[]>([
         id: 'edit',
         label: 'Edit',
         icon: 'edit',
+        tooltip: 'Edit user details',
         onActionClick: rowActionClick,
       },
     ],
@@ -242,6 +244,7 @@ const data = ref<ListRowData[]>([
         id: 'edit',
         label: 'Edit',
         icon: 'edit',
+        tooltip: 'Edit user information',
         onActionClick: rowActionClick,
       },
       {
@@ -249,6 +252,7 @@ const data = ref<ListRowData[]>([
         label: 'Delete',
         icon: 'trash',
         color: 'var(--danger-color)',
+        tooltip: 'Permanently delete this user',
         onActionClick: rowActionClick,
       },
     ],
@@ -329,6 +333,7 @@ const data = ref<ListRowData[]>([
         id: 'view',
         label: 'View',
         icon: 'eye',
+        tooltip: 'View user profile',
         onActionClick: rowActionClick,
       },
     ],
@@ -407,6 +412,7 @@ const data = ref<ListRowData[]>([
         id: 'view',
         label: 'View',
         icon: 'eye',
+        tooltip: 'View user profile',
         onActionClick: rowActionClick,
       },
     ],
@@ -429,6 +435,7 @@ const data = ref<ListRowData[]>([
         id: 'view',
         label: 'View',
         icon: 'eye',
+        tooltip: 'View user profile',
         onActionClick: rowActionClick,
       },
     ],
@@ -459,6 +466,7 @@ const data = ref<ListRowData[]>([
         id: 'info',
         label: 'Info',
         icon: 'info',
+        tooltip: 'View additional information about this row',
         onActionClick: rowActionClick,
       },
     ],