clean up datarow interactions when both selectable and with kebab

FlowFuse · Mar 15, 2023 · 5415aca · 5415aca
1 parent 8a905cd
commit 5415aca
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 7 deletions.
diff --git a/docs/DesignLanguage.vue b/docs/DesignLanguage.vue
@@ -167,7 +167,7 @@
                             <pre style="display:inline;">.stop</pre> event modifier on the event handlers. This is important if
                             <pre style="display:inline;">:rows-selectable="true"</pre> to prevent the click event bubbling up to the row.
                         </p>
-                        <ff-data-table :columns="data.table0.columns" :rows="data.table0.rows">
+                        <ff-data-table :columns="data.table0.columns" :rows="data.table0.rows" :rows-selectable="true" @row-selected="doSomething">
                             <template v-slot:context-menu>
                                 <ff-list-item label="Option 1" @click.stop=""/>
                                 <ff-list-item label="Option 2" @click.stop=""/>

diff --git a/docs/data/table.docs.json b/docs/data/table.docs.json
@@ -9,7 +9,7 @@
         }, {
             "code": "<ff-data-table :columns=\"cols\" :rows=\"rows\" :rows-selectable=\"true\" @row-selected=\"doSomething\"></ff-data-table>"
         }, {
-            "code": "<ff-data-table :columns=\"cols\" :rows=\"rows\">\n\t<template v-slot:context-menu=\"{row}\">\n\t\t<ff-list-item label=\"Option 1\" @click.stop=\"doSomething(row)\"/>\n\t\t<ff-list-item label=\"Option 2\" @click.stop=\"doSomething(row)\"/>\n\t\t<ff-list-item label=\"Option 3\" @click.stop=\"doSomething(row)\"/>\n\t</template>\n</ff-data-table>"
+            "code": "<ff-data-table :columns=\"cols\" :rows=\"rows\" :rows-selectable=\"true\" @row-selected=\"doSomething\">\n\t<template v-slot:context-menu=\"{row}\">\n\t\t<ff-list-item label=\"Option 1\" @click.stop=\"doSomething(row)\"/>\n\t\t<ff-list-item label=\"Option 2\" @click.stop=\"doSomething(row)\"/>\n\t\t<ff-list-item label=\"Option 3\" @click.stop=\"doSomething(row)\"/>\n\t</template>\n</ff-data-table>"
         }, {
             "code": "<ff-data-table :columns=\"cols\" :rows=\"rows\" :show-search=\"true\"\n\tsearch-placeholder=\"Search here...\" v-model:search=\"search\">\n\t<template v-slot:actions>\n\t\t<ff-button>Press Me!</ff-button>\n\t\t<ff-button>Click Me!</ff-button>\n\t</template>\n</ff-data-table>"
         }, {

diff --git a/src/components/data-table/DataTable.vue b/src/components/data-table/DataTable.vue
@@ -41,7 +41,7 @@
                         </ff-data-table-row>
                         <template v-if="!loading">
                             <ff-data-table-row v-for="(r, $index) in filteredRows" :key="$index" :data="r" :columns="columns"
-                                :selectable="rowsSelectable" :highlight-cell="sort.highlightColumn" @click="rowClick(r)"
+                                :selectable="rowsSelectable" :highlight-cell="sort.highlightColumn" @selected="rowClick(r)"
                             >
                                 <template v-if="hasContextMenu" #context-menu="{row}">
                                     <slot name="context-menu" :row="row"></slot>

diff --git a/src/components/data-table/DataTableRow.vue b/src/components/data-table/DataTableRow.vue
@@ -1,7 +1,7 @@
 <template>
-    <tr class="ff-data-table--row" :class="{'selectable': selectable}" @click="$emit('selected', data)">
+    <tr class="ff-data-table--row" :class="{'selectable': selectable}">
         <slot>
-            <ff-data-table-cell v-for="(col, $column) in columns" :key="col.label" :class="col.class" :style="col.style" :highlight="highlightCell === $column">
+            <ff-data-table-cell v-for="(col, $column) in columns" :key="col.label" :class="col.class" :style="col.style" :highlight="highlightCell === $column" @click="$emit('selected', data)">
                 <template v-if="col.component">
                     <component :is="col.component.is" v-bind="{...col.component.extraProps ?? {}, ...getCellData(data, col)}"></component>
                 </template>
@@ -13,8 +13,8 @@
                 </template>
             </ff-data-table-cell>
         </slot>
-        <ff-data-table-cell v-if="hasContextMenu" style="width: 50px">
-            <ff-kebab-menu menu-align="right">
+        <ff-data-table-cell v-if="hasContextMenu" style="width: 50px" @click="$refs.kebab.openOptions()">
+            <ff-kebab-menu ref="kebab" menu-align="right">
                 <slot name="context-menu" :row="data" message="hello world"></slot>
             </ff-kebab-menu>
         </ff-data-table-cell>

diff --git a/src/stylesheets/ff-components.scss b/src/stylesheets/ff-components.scss
@@ -165,6 +165,7 @@
 }
 
 .ff-kebab-options {
+  color: $ff-grey-800;
   position: absolute;
   top: 24px;
   border: 1px solid $ff-grey-300;
@@ -647,6 +648,7 @@ li.ff-list-item {
       }
       .selectable:hover .ff-data-table--cell {
         cursor: pointer;
+        color: $ff-blue-600;
         background-color: $ff-grey-50;
       }
     }