@onereach/ui-components 20.3.1 → 20.4.0

package/dist/esm/components/or-data-grid-v3/OrDataGrid.vue.d.ts

@@ -1,6 +1,10 @@
 import { PropType } from 'vue';
-import { Id } from '@onereach/ui-components-common/types';
-import { DataGridColumn, DataGridFeatures, DataGridModelValue, DataGridVariant } from './types';
+import { DataModel, Id } from '@onereach/ui-components-common/types';
+import { DataGridColumn, DataGridFeatures, DataGridItem, DataGridModelValue, DataGridVariant } from './types';
+type T = DataModel<{
+    id: Id;
+    [key: string]: any;
+}>;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: PropType<DataGridModelValue>;
@@ -33,6 +37,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<any>;
         default: undefined;
     };
+    interactiveRows: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue").Ref<HTMLElement | undefined>;
     rootStyles: import("vue").ComputedRef<string[]>;
@@ -43,6 +51,11 @@ declare const _default: import("vue").DefineComponent<{
     selectingIndicator: import("vue").WritableComputedRef<boolean>;
     showSelectingCouter: import("vue").ComputedRef<boolean | undefined>;
     selectingDisabled: import("vue").ComputedRef<boolean | undefined>;
+    handleMouseEnterRow: (item: DataGridItem<T>) => void;
+    handleMouseLeaveRow: (item: DataGridItem<T>) => void;
+    handleMouseEnterCell: (item: DataGridItem<T>, columnName: string, value: any) => void;
+    handleMouseLeaveCell: (item: DataGridItem<T>, columnName: string, value: any) => void;
+    handleRowClick: (item: DataGridItem<T>) => void;
     selectingModel: import("vue").WritableComputedRef<Id[]>;
     filteringModel: import("vue").WritableComputedRef<undefined>;
     searchingModel: import("vue").WritableComputedRef<import("@onereach/ui-components-common/types").ModelValue<string>>;
@@ -55,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
     removeScrollOffset: (header: HTMLElement) => void;
     updateSearchingModel: (value: string) => void;
     scrollTo: (event: FocusEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:item" | "close-notification")[], "update:modelValue" | "update:item" | "close-notification", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:item" | "close-notification" | "hover:row" | "blur:row" | "hover:cell" | "blur:cell" | "click:row")[], "update:modelValue" | "update:item" | "close-notification" | "hover:row" | "blur:row" | "hover:cell" | "blur:cell" | "click:row", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<DataGridModelValue>;
         default: undefined;
@@ -87,10 +100,19 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<any>;
         default: undefined;
     };
+    interactiveRows: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:item"?: ((...args: any[]) => any) | undefined;
     "onClose-notification"?: ((...args: any[]) => any) | undefined;
+    "onHover:row"?: ((...args: any[]) => any) | undefined;
+    "onBlur:row"?: ((...args: any[]) => any) | undefined;
+    "onHover:cell"?: ((...args: any[]) => any) | undefined;
+    "onBlur:cell"?: ((...args: any[]) => any) | undefined;
+    "onClick:row"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: DataGridModelValue;
     items: {
@@ -101,5 +123,6 @@ declare const _default: import("vue").DefineComponent<{
     features: DataGridFeatures;
     loading: boolean;
     notification: any;
+    interactiveRows: boolean;
 }, {}>;
 export default _default;

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

@@ -369,13 +369,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
@@ -1021,9 +1025,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
@@ -1161,6 +1169,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);
@@ -1180,6 +1220,11 @@ var script = defineComponent({
       selectingIndicator,
       showSelectingCouter,
       selectingDisabled,
+      handleMouseEnterRow,
+      handleMouseLeaveRow,
+      handleMouseEnterCell,
+      handleMouseLeaveCell,
+      handleRowClick,
       selectingModel,
       filteringModel,
       searchingModel,
@@ -1303,7 +1348,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, renderList(10, n => {
         return createVNode(_component_OrDataGridTableContentRow, {
           key: n,
-          variant: _ctx.variant
+          variant: _ctx.variant,
+          interactive: _ctx.interactiveRows
         }, {
           default: withCtx(() => [_ctx.features.selecting ? (openBlock(), createBlock(_component_OrDataGridTableContentCell, {
             key: 0,
@@ -1326,14 +1372,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["column", "features"]);
           }), 128 /* KEYED_FRAGMENT */))]),
           _: 2 /* DYNAMIC */
-        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant"]);
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "interactive"]);
       }), 64 /* STABLE_FRAGMENT */)) : _ctx.items.length > 0 ? (openBlock(true), createElementBlock(Fragment, {
         key: 1
       }, renderList(_ctx.items, item => {
         return openBlock(), createBlock(_component_OrDataGridTableContentRow, {
           key: item.id,
           variant: _ctx.variant,
-          selected: _ctx.selectingModel.includes(item.id)
+          selected: _ctx.selectingModel.includes(item.id),
+          interactive: _ctx.interactiveRows,
+          onMouseenter: () => _ctx.handleMouseEnterRow(item),
+          onMouseleave: () => _ctx.handleMouseLeaveRow(item),
+          onClick: () => _ctx.handleRowClick(item)
         }, {
           default: withCtx(() => [_ctx.features.selecting ? (openBlock(), createBlock(_component_OrDataGridTableContentCell, {
             key: 0,
@@ -1341,7 +1391,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               stickiness: 'start'
             },
             "force-state": 'none',
-            class: "!py-xs !px-xs md:!py-none md:!px-sm+"
+            class: "!py-xs !px-xs md:!py-none md:!px-sm+",
+            onMouseenter: () => _ctx.handleMouseEnterCell(item, 'selecting', _ctx.selectingModel.includes(item.id)),
+            onMouseleave: () => _ctx.handleMouseLeaveCell(item, 'selecting', _ctx.selectingModel.includes(item.id))
           }, {
             default: withCtx(() => [createVNode(_component_OrCheckbox, {
               modelValue: _ctx.selectingModel,
@@ -1350,7 +1402,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               disabled: _ctx.selectingDisabled
             }, null, 8 /* PROPS */, ["modelValue", "value", "disabled"])]),
             _: 2 /* DYNAMIC */
-          }, 1024 /* DYNAMIC_SLOTS */)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, column => {
+          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onMouseenter", "onMouseleave"])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, column => {
             return openBlock(), createBlock(_component_OrDataGridTableContentCell, {
               key: column.name,
               "model-value": item[column.name],
@@ -1360,17 +1412,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 item[column.name] = value;
                 _ctx.$emit('update:item', item);
               },
-              onFocusin: _cache[5] || (_cache[5] = $event => _ctx.scrollTo($event))
+              onFocusin: _cache[5] || (_cache[5] = $event => _ctx.scrollTo($event)),
+              onMouseenter: () => _ctx.handleMouseEnterCell(item, column.name, item[column.name]),
+              onMouseleave: () => _ctx.handleMouseLeaveCell(item, column.name, item[column.name])
             }, {
               default: withCtx(() => [renderSlot(_ctx.$slots, column.name, {
                 column: column,
                 item: item
               }, () => [createTextVNode(toDisplayString(item[column.name]), 1 /* TEXT */)])]),
               _: 2 /* DYNAMIC */
-            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["model-value", "column", "features", "onInput"]);
+            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["model-value", "column", "features", "onInput", "onMouseenter", "onMouseleave"]);
           }), 128 /* KEYED_FRAGMENT */))]),
           _: 2 /* DYNAMIC */
-        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "selected"]);
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "selected", "interactive", "onMouseenter", "onMouseleave", "onClick"]);
       }), 128 /* KEYED_FRAGMENT */)) : _ctx.$slots['noSearchResults'] && (_ctx.features.filtering && _ctx.filteringModel || _ctx.features.searching && _ctx.searchingModel) ? (openBlock(), createBlock(_component_OrDataGridTablePlaceholder, {
         key: 2,
         class: normalizeClass(['col-span-full']),

package/dist/esm/components/or-data-grid-v3/partials/or-data-grid-table-content-row/OrDataGridTableContentRow.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue").Ref<HTMLElement | undefined>;
     rootStyles: import("vue").ComputedRef<string[]>;
@@ -21,7 +25,12 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     selected: boolean;
+    interactive: boolean;
 }, {}>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "20.3.1",
+  "version": "20.4.0",
   "description": "Vue components library for v3",
   "sideEffects": false,
   "exports": {
@@ -44,8 +44,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",
@@ -105,5 +105,5 @@
     "access": "public"
   },
   "npmUnpacked": "4.15.2",
-  "gitHead": "ede500b09e1eaac359f8dc812db0f1cf7a4deeb1"
+  "gitHead": "4739e1eb32ed19459b84bf21e1c5b7bfe548332e"
 }