@onereach/ui-components-vue2 20.3.1 → 20.4.0

package/dist/esm/components/or-data-grid-v3/index.js

@@ -488,13 +488,17 @@ var script$c = defineComponent({
     selected: {
       type: Boolean,
       default: false
+    },
+    interactive: {
+      type: Boolean,
+      default: false
     }
   },
   expose: ['root'],
   setup(props) {
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-data-grid-table-content-row-v3', ...DataGridTableContentRow, ...DataGridTableContentRowVariants[props.variant]]);
+    const rootStyles = computed(() => ['or-data-grid-table-content-row-v3', ...DataGridTableContentRow, ...DataGridTableContentRowVariants[props.variant], ...(props.interactive ? ['cursor-pointer'] : [])]);
     return {
       root,
       rootStyles
@@ -1442,9 +1446,13 @@ var script = defineComponent({
     notification: {
       type: Object,
       default: undefined
+    },
+    interactiveRows: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['update:modelValue', 'update:item', 'close-notification'],
+  emits: ['update:modelValue', 'update:item', 'close-notification', 'hover:row', 'blur:row', 'hover:cell', 'blur:cell', 'click:row'],
   expose: ['root'],
   setup(props, context) {
     // Refs & Styles
@@ -1582,6 +1590,38 @@ var script = defineComponent({
           break;
       }
     }
+    function handleMouseEnterRow(item) {
+      if (!props.interactiveRows) return;
+      context.emit('hover:row', item);
+    }
+    function handleMouseLeaveRow(item) {
+      if (!props.interactiveRows) return;
+      context.emit('blur:row', item);
+    }
+    function handleMouseEnterCell(item, columnName, value) {
+      if (!props.interactiveRows) return;
+      context.emit('hover:cell', {
+        item,
+        columnName,
+        value
+      });
+    }
+    function handleMouseLeaveCell(item, columnName, value) {
+      if (!props.interactiveRows) return;
+      context.emit('blur:cell', {
+        item,
+        columnName,
+        value
+      });
+    }
+    function handleRowClick(item) {
+      if (!props.interactiveRows) return;
+      context.emit('click:row', item);
+    }
+    // function handleCellClick(item: DataGridItem<T>, columnName: string, value: any): void {
+    //   if (!props.interactiveRows) return;
+    //   context.emit('click:cell', { item, columnName, value });
+    // }
     function removeScrollOffset(header) {
       scrollOffsetStart.value.delete(header);
       scrollOffsetStart.value = new Map(scrollOffsetStart.value);
@@ -1601,6 +1641,11 @@ var script = defineComponent({
       selectingIndicator,
       showSelectingCouter,
       selectingDisabled,
+      handleMouseEnterRow,
+      handleMouseLeaveRow,
+      handleMouseEnterCell,
+      handleMouseLeaveCell,
+      handleRowClick,
       selectingModel,
       filteringModel,
       searchingModel,
@@ -1731,7 +1776,8 @@ var __vue_render__ = function () {
     return _c('OrDataGridTableContentRow', {
       key: n,
       attrs: {
-        "variant": _vm.variant
+        "variant": _vm.variant,
+        "interactive": _vm.interactiveRows
       }
     }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', {
       attrs: {
@@ -1755,7 +1801,19 @@ var __vue_render__ = function () {
       key: item.id,
       attrs: {
         "variant": _vm.variant,
-        "selected": _vm.selectingModel.includes(item.id)
+        "selected": _vm.selectingModel.includes(item.id),
+        "interactive": _vm.interactiveRows
+      },
+      on: {
+        "mouseenter": function () {
+          return _vm.handleMouseEnterRow(item);
+        },
+        "mouseleave": function () {
+          return _vm.handleMouseLeaveRow(item);
+        },
+        "click": function () {
+          return _vm.handleRowClick(item);
+        }
       }
     }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', {
       staticClass: "!py-xs !px-xs md:!py-none md:!px-sm+",
@@ -1764,6 +1822,14 @@ var __vue_render__ = function () {
           stickiness: 'start'
         },
         "force-state": 'none'
+      },
+      on: {
+        "mouseenter": function () {
+          return _vm.handleMouseEnterCell(item, 'selecting', _vm.selectingModel.includes(item.id));
+        },
+        "mouseleave": function () {
+          return _vm.handleMouseLeaveCell(item, 'selecting', _vm.selectingModel.includes(item.id));
+        }
       }
     }, [_c('OrCheckbox', {
       attrs: {
@@ -1792,6 +1858,12 @@ var __vue_render__ = function () {
           },
           "focusin": function ($event) {
             return _vm.scrollTo($event);
+          },
+          "mouseenter": function () {
+            return _vm.handleMouseEnterCell(item, column.name, item[column.name]);
+          },
+          "mouseleave": function () {
+            return _vm.handleMouseLeaveCell(item, column.name, item[column.name]);
           }
         }
       }, [_vm._t(column.name, function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components-vue2",
-  "version": "20.3.1",
+  "version": "20.4.0",
   "description": "Vue components library for v2",
   "sideEffects": false,
   "exports": {
@@ -39,8 +39,8 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^20.3.1",
-    "@onereach/ui-components-common": "^20.3.1",
+    "@onereach/styles": "^20.4.0",
+    "@onereach/ui-components-common": "^20.4.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -104,5 +104,5 @@
     "access": "public"
   },
   "npmUnpacked": "4.15.2",
-  "gitHead": "ede500b09e1eaac359f8dc812db0f1cf7a4deeb1"
+  "gitHead": "4739e1eb32ed19459b84bf21e1c5b7bfe548332e"
 }