npm - @onereach/ui-components - Versions diffs - 20.3.1 → 20.5.0 - Mend

@onereach/ui-components 20.3.1 → 20.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

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

@@ -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 CHANGED Viewed

@@ -1,19 +1,19 @@
 import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, resolveComponent, normalizeStyle, Fragment, createBlock, watch, createElementVNode, createVNode, mergeProps, withCtx, createSlots, normalizeProps, guardReactiveProps, renderList, createTextVNode, toDisplayString } from 'vue';
-import { OrCheckboxV3 as script$g } from '../or-checkbox-v3/index.js';
-import { OrDatePickerV3 as script$h } from '../or-date-picker-v3/index.js';
-import { s as script$i } from '../OrDateTimePickerV3-3c2fd488.js';
-import { OrInputV3 as script$j } from '../or-input-v3/index.js';
-import { OrRatingV3 as script$k } from '../or-rating-v3/index.js';
-import { OrSelectV3 as script$l } from '../or-select-v3/index.js';
-import { OrSwitchV3 as script$m } from '../or-switch-v3/index.js';
-import { OrTagInputV3 as script$n } from '../or-tag-input-v3/index.js';
-import { OrTimePickerV3 as script$o } from '../or-time-picker-v3/index.js';
+import { OrCheckboxV3 as script$h } from '../or-checkbox-v3/index.js';
+import { OrDatePickerV3 as script$i } from '../or-date-picker-v3/index.js';
+import { s as script$j } from '../OrDateTimePickerV3-3c2fd488.js';
+import { OrInputV3 as script$k } from '../or-input-v3/index.js';
+import { OrRatingV3 as script$l } from '../or-rating-v3/index.js';
+import { OrSelectV3 as script$m } from '../or-select-v3/index.js';
+import { OrSwitchV3 as script$n } from '../or-switch-v3/index.js';
+import { OrTagInputV3 as script$o } from '../or-tag-input-v3/index.js';
+import { OrTimePickerV3 as script$p } from '../or-time-picker-v3/index.js';
 import { useElementSize } from '@vueuse/core';
-import { OrIconV3 as script$p } from '../or-icon-v3/index.js';
-import { OrNotificationV3 as script$q } from '../or-notification-v3/index.js';
-import { OrPaginationV3 as script$r } from '../or-pagination-v3/index.js';
-import { OrSearchV3 as script$s } from '../or-search-v3/index.js';
-import { OrSkeletonTextV3 as script$t } from '../or-skeleton-v3/index.js';
+import { OrIconV3 as script$q } from '../or-icon-v3/index.js';
+import { OrNotificationV3 as script$r } from '../or-notification-v3/index.js';
+import { OrPaginationV3 as script$s } from '../or-pagination-v3/index.js';
+import { OrSearchV3 as script$t } from '../or-search-v3/index.js';
+import { OrSkeletonTextV3 as script$u } from '../or-skeleton-v3/index.js';
 import '../OrAutocompleteV3-fd7065f1.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
@@ -59,7 +59,7 @@ const DataGridFooterStatus = [
 // Typography
 'typography-body-2-semibold'];
-var script$f = defineComponent({
+var script$g = defineComponent({
   name: 'OrDataGridFooter',
   expose: ['root'],
   setup() {
@@ -75,22 +75,22 @@ var script$f = defineComponent({
   }
 });
-const _hoisted_1$4 = {
+const _hoisted_1$5 = {
   key: 1,
   class: /*#__PURE__*/normalizeClass(['grow'])
 };
-function render$f(_ctx, _cache, $props, $setup, $data, $options) {
+function render$g(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [_ctx.$slots['status'] ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(_ctx.statusStyles)
-  }, [renderSlot(_ctx.$slots, 'status')], 2 /* CLASS */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'actions'), _ctx.$slots['paging'] ? (openBlock(), createElementBlock("div", _hoisted_1$4)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'paging')], 2 /* CLASS */);
+  }, [renderSlot(_ctx.$slots, 'status')], 2 /* CLASS */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'actions'), _ctx.$slots['paging'] ? (openBlock(), createElementBlock("div", _hoisted_1$5)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'paging')], 2 /* CLASS */);
 }
-script$f.render = render$f;
-script$f.__file = "src/components/or-data-grid-v3/partials/or-data-grid-footer/OrDataGridFooter.vue";
+script$g.render = render$g;
+script$g.__file = "src/components/or-data-grid-v3/partials/or-data-grid-footer/OrDataGridFooter.vue";
 const DataGridHeader = [
 // Layout
@@ -103,7 +103,7 @@ const DataGridHeaderTitle = [
 // Typography
 'typography-headline-2'];
-var script$e = defineComponent({
+var script$f = defineComponent({
   name: 'OrDataGridHeader',
   expose: ['root'],
   setup() {
@@ -119,22 +119,22 @@ var script$e = defineComponent({
   }
 });
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   key: 1,
   class: /*#__PURE__*/normalizeClass(['grow'])
 };
-function render$e(_ctx, _cache, $props, $setup, $data, $options) {
+function render$f(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [_ctx.$slots['title'] ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(_ctx.titleStyles)
-  }, [renderSlot(_ctx.$slots, 'title')], 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.$slots['searching'] ? (openBlock(), createElementBlock("div", _hoisted_1$3)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'searching')], 2 /* CLASS */);
+  }, [renderSlot(_ctx.$slots, 'title')], 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.$slots['searching'] ? (openBlock(), createElementBlock("div", _hoisted_1$4)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'searching')], 2 /* CLASS */);
 }
-script$e.render = render$e;
-script$e.__file = "src/components/or-data-grid-v3/partials/or-data-grid-header/OrDataGridHeader.vue";
+script$f.render = render$f;
+script$f.__file = "src/components/or-data-grid-v3/partials/or-data-grid-header/OrDataGridHeader.vue";
 const DataGridTableContentCell = [
 // Layout
@@ -150,18 +150,18 @@ const DataGridTableContentCell = [
 // Theme (.sticky-end)
 '[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
-var script$d = defineComponent({
+var script$e = defineComponent({
   name: 'OrDataGridTableContentCell',
   components: {
-    OrCheckbox: script$g,
-    OrDatePicker: script$h,
-    OrDateTimePicker: script$i,
-    OrInput: script$j,
-    OrRating: script$k,
-    OrSelect: script$l,
-    OrSwitch: script$m,
-    OrTagInput: script$n,
-    OrTimePicker: script$o
+    OrCheckbox: script$h,
+    OrDatePicker: script$i,
+    OrDateTimePicker: script$j,
+    OrInput: script$k,
+    OrRating: script$l,
+    OrSelect: script$m,
+    OrSwitch: script$n,
+    OrTagInput: script$o,
+    OrTimePicker: script$p
   },
   model: {
     prop: 'modelValue',
@@ -243,11 +243,11 @@ var script$d = defineComponent({
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   key: 2,
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
-function render$d(_ctx, _cache, $props, $setup, $data, $options) {
+function render$e(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrInput = resolveComponent("OrInput");
   const _component_OrRating = resolveComponent("OrRating");
   const _component_OrSelect = resolveComponent("OrSelect");
@@ -319,11 +319,11 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
     modelValue: _ctx.model,
     "onUpdate:modelValue": _cache[9] || (_cache[9] = $event => _ctx.model = $event),
     variant: 'embedded'
-  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", _hoisted_1$2, [renderSlot(_ctx.$slots, "default")]))], 6 /* CLASS, STYLE */);
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "default")]))], 6 /* CLASS, STYLE */);
 }
-script$d.render = render$d;
-script$d.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue";
+script$e.render = render$e;
+script$e.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue";
 var DataGridVariant;
 (function (DataGridVariant) {
@@ -359,7 +359,7 @@ const DataGridTableContentRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
-var script$c = defineComponent({
+var script$d = defineComponent({
   name: 'OrDataGridTableContentRow',
   props: {
     variant: {
@@ -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
@@ -383,23 +387,23 @@ var script$c = defineComponent({
   }
 });
-const _hoisted_1$1 = ["selected"];
-function render$c(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$2 = ["selected"];
+function render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
     selected: _ctx.selected
-  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$1);
+  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$2);
 }
-script$c.render = render$c;
-script$c.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-row/OrDataGridTableContentRow.vue";
+script$d.render = render$d;
+script$d.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-row/OrDataGridTableContentRow.vue";
 const DataGridTableContent = [
 // Layout
 'contents'];
-var script$b = defineComponent({
+var script$c = defineComponent({
   name: 'OrDataGridTableContent',
   expose: ['root'],
   setup() {
@@ -413,15 +417,15 @@ var script$b = defineComponent({
   }
 });
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
-script$b.render = render$b;
-script$b.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content/OrDataGridTableContent.vue";
+script$c.render = render$c;
+script$c.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content/OrDataGridTableContent.vue";
 const DataGridTableFooterCell = [
 // Layout
@@ -431,7 +435,7 @@ const DataGridTableFooterCell = [
 // Theme
 'theme-border-transparent border-1', 'dark:theme-border-transparent-dark'];
-var script$a = defineComponent({
+var script$b = defineComponent({
   name: 'OrDataGridTableFooterCell',
   expose: ['root'],
   setup() {
@@ -445,15 +449,15 @@ var script$a = defineComponent({
   }
 });
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
-script$a.render = render$a;
-script$a.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-cell/OrDataGridTableFooterCell.vue";
+script$b.render = render$b;
+script$b.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-cell/OrDataGridTableFooterCell.vue";
 const DataGridTableFooterRow = [
 // Layout
@@ -476,7 +480,7 @@ const DataGridTableFooterRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
-var script$9 = defineComponent({
+var script$a = defineComponent({
   name: 'OrDataGridTableFooterRow',
   props: {
     variant: {
@@ -496,21 +500,21 @@ var script$9 = defineComponent({
   }
 });
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
-script$9.render = render$9;
-script$9.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-row/OrDataGridTableFooterRow.vue";
+script$a.render = render$a;
+script$a.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-row/OrDataGridTableFooterRow.vue";
 const DataGridTableFooter = [
 // Layout
 'contents'];
-var script$8 = defineComponent({
+var script$9 = defineComponent({
   name: 'OrDataGridTableFooter',
   expose: ['root'],
   setup() {
@@ -524,15 +528,15 @@ var script$8 = defineComponent({
   }
 });
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
-script$8.render = render$8;
-script$8.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer/OrDataGridTableFooter.vue";
+script$9.render = render$9;
+script$9.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer/OrDataGridTableFooter.vue";
 const DataGridTableHeaderCell = [
 // Layout
@@ -546,10 +550,10 @@ const DataGridTableHeaderCell = [
 // Theme (.sticky-end)
 '[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
-var script$7 = defineComponent({
+var script$8 = defineComponent({
   name: 'OrDataGridTableHeaderCell',
   components: {
-    OrIcon: script$p
+    OrIcon: script$q
   },
   model: {
     prop: 'modelValue',
@@ -665,24 +669,24 @@ var script$7 = defineComponent({
   }
 });
-const _hoisted_1 = {
+const _hoisted_1$1 = {
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
     style: normalizeStyle(_ctx.rootInlineStyles),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.toggleSorting())
-  }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), _ctx.model ? (openBlock(), createBlock(_component_OrIcon, {
+  }, [createElementVNode("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")]), _ctx.model ? (openBlock(), createBlock(_component_OrIcon, {
     key: 0,
     icon: _ctx.model.direction === 'asc' ? 'arrow_upward' : 'arrow_downward'
   }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */);
 }
-script$7.render = render$7;
-script$7.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue";
+script$8.render = render$8;
+script$8.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue";
 const DataGridTableHeaderRow = [
 // Position
@@ -705,7 +709,7 @@ const DataGridTableHeaderRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
-var script$6 = defineComponent({
+var script$7 = defineComponent({
   name: 'OrDataGridTableHeaderRow',
   props: {
     variant: {
@@ -725,21 +729,21 @@ var script$6 = defineComponent({
   }
 });
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
-script$6.render = render$6;
-script$6.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-row/OrDataGridTableHeaderRow.vue";
+script$7.render = render$7;
+script$7.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-row/OrDataGridTableHeaderRow.vue";
 const DataGridTableHeader = [
 // Layout
 'contents'];
-var script$5 = defineComponent({
+var script$6 = defineComponent({
   name: 'OrDataGridTableHeader',
   expose: ['root'],
   setup() {
@@ -753,15 +757,15 @@ var script$5 = defineComponent({
   }
 });
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
-script$5.render = render$5;
-script$5.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header/OrDataGridTableHeader.vue";
+script$6.render = render$6;
+script$6.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header/OrDataGridTableHeader.vue";
 const DataGridTablePlaceholder = [
 // Layout
@@ -784,7 +788,7 @@ const DataGridTablePlaceholderVariants = {
   'min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
-var script$4 = defineComponent({
+var script$5 = defineComponent({
   name: 'OrDataGridTablePlaceholder',
   props: {
     variant: {
@@ -804,15 +808,15 @@ var script$4 = defineComponent({
   }
 });
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
-script$4.render = render$4;
-script$4.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue";
+script$5.render = render$5;
+script$5.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue";
 const DataGridTable = [
 // Layout
@@ -822,7 +826,7 @@ const DataGridTable = [
 // Interactivity
 'interactivity-default'];
-var script$3 = defineComponent({
+var script$4 = defineComponent({
   name: 'OrDataGridTable',
   props: {
     columns: {
@@ -861,7 +865,7 @@ var script$3 = defineComponent({
   }
 });
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
@@ -869,8 +873,8 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   }, [renderSlot(_ctx.$slots, "default")], 6 /* CLASS, STYLE */);
 }
-script$3.render = render$3;
-script$3.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table/OrDataGridTable.vue";
+script$4.render = render$4;
+script$4.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table/OrDataGridTable.vue";
 const DataGridToolbar = [
 // Layout
@@ -880,7 +884,7 @@ const DataGridToolbar = [
 // Spacing
 'gap-xl'];
-var script$2 = defineComponent({
+var script$3 = defineComponent({
   name: 'OrDataGridToolbar',
   expose: ['root'],
   setup() {
@@ -894,15 +898,15 @@ var script$2 = defineComponent({
   }
 });
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
-script$2.render = render$2;
-script$2.__file = "src/components/or-data-grid-v3/partials/or-data-grid-toolbar/OrDataGridToolbar.vue";
+script$3.render = render$3;
+script$3.__file = "src/components/or-data-grid-v3/partials/or-data-grid-toolbar/OrDataGridToolbar.vue";
 const DataGridNotification = [
 // Position
@@ -921,9 +925,9 @@ const DataGridNotificationPositionVariants = {
   'top-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
-var script$1 = defineComponent({
+var script$2 = defineComponent({
   components: {
-    OrNotification: script$q
+    OrNotification: script$r
   },
   props: {
     notification: {
@@ -944,7 +948,7 @@ var script$1 = defineComponent({
   }
 });
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrNotification = resolveComponent("OrNotification");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.rootStyles)
@@ -959,8 +963,59 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, 16 /* FULL_PROPS */)], 2 /* CLASS */);
 }
+script$2.render = render$2;
+script$2.__file = "src/components/or-data-grid-v3/partials/or-data-grid-notification/OrDataGridNotification.vue";
+const DataGridTableExtraRow = [
+// Layout
+'grid px-sm+',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-border-disabled', 'dark:theme-border-disabled-dark',
+// Theme (children)
+'children:theme-foreground-default', 'dark:children:theme-foreground-default-dark', 'children:theme-background-default', 'dark:children:theme-background-default-dark'];
+const DataGridTableExtraRowVariants = {
+  [DataGridVariant.Standard]: [
+  // Box
+  'h-[calc(theme(spacing.2xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Comfortable]: [
+  // Box
+  'h-[calc(theme(spacing.3xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Compact]: [
+  // Box
+  'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
+};
+var script$1 = defineComponent({
+  name: 'OrDataGridTableExtraRow',
+  props: {
+    variant: {
+      type: String,
+      required: true
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-table-footer-row-v3', ...DataGridTableExtraRow, ...DataGridTableExtraRowVariants[props.variant]]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
 script$1.render = render$1;
-script$1.__file = "src/components/or-data-grid-v3/partials/or-data-grid-notification/OrDataGridNotification.vue";
+script$1.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-extra-row/OrDataGridTableExtraRow.vue";
 const DataGrid = [
 // Layout
@@ -969,25 +1024,26 @@ const DataGrid = [
 var script = defineComponent({
   name: 'OrDataGrid',
   components: {
-    OrCheckbox: script$g,
-    OrDataGridFooter: script$f,
-    OrDataGridHeader: script$e,
-    OrDataGridTable: script$3,
-    OrDataGridTableContent: script$b,
-    OrDataGridTableContentCell: script$d,
-    OrDataGridTableContentRow: script$c,
-    OrDataGridTableFooter: script$8,
-    OrDataGridTableFooterCell: script$a,
-    OrDataGridTableFooterRow: script$9,
-    OrDataGridTableHeader: script$5,
-    OrDataGridTableHeaderCell: script$7,
-    OrDataGridTableHeaderRow: script$6,
-    OrDataGridTablePlaceholder: script$4,
-    OrDataGridToolbar: script$2,
-    OrDataGridNotification: script$1,
-    OrPagination: script$r,
-    OrSearch: script$s,
-    OrSkeletonText: script$t
+    OrCheckbox: script$h,
+    OrDataGridFooter: script$g,
+    OrDataGridHeader: script$f,
+    OrDataGridTable: script$4,
+    OrDataGridTableContent: script$c,
+    OrDataGridTableContentCell: script$e,
+    OrDataGridTableContentRow: script$d,
+    OrDataGridTableFooter: script$9,
+    OrDataGridTableFooterCell: script$b,
+    OrDataGridTableFooterRow: script$a,
+    OrDataGridTableExtraRow: script$1,
+    OrDataGridTableHeader: script$6,
+    OrDataGridTableHeaderCell: script$8,
+    OrDataGridTableHeaderRow: script$7,
+    OrDataGridTablePlaceholder: script$5,
+    OrDataGridToolbar: script$3,
+    OrDataGridNotification: script$2,
+    OrPagination: script$s,
+    OrSearch: script$t,
+    OrSkeletonText: script$u
   },
   model: {
     prop: 'modelValue',
@@ -1021,9 +1077,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 +1221,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 +1272,11 @@ var script = defineComponent({
       selectingIndicator,
       showSelectingCouter,
       selectingDisabled,
+      handleMouseEnterRow,
+      handleMouseLeaveRow,
+      handleMouseEnterCell,
+      handleMouseLeaveCell,
+      handleRowClick,
       selectingModel,
       filteringModel,
       searchingModel,
@@ -1193,6 +1290,12 @@ var script = defineComponent({
   }
 });
+const _hoisted_1 = {
+  class: "col-span-full self-center"
+};
+const _hoisted_2 = {
+  class: "col-span-full self-center"
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrSearch = resolveComponent("OrSearch");
   const _component_OrDataGridHeader = resolveComponent("OrDataGridHeader");
@@ -1202,6 +1305,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrDataGridTableHeaderRow = resolveComponent("OrDataGridTableHeaderRow");
   const _component_OrDataGridTableHeader = resolveComponent("OrDataGridTableHeader");
   const _component_OrDataGridNotification = resolveComponent("OrDataGridNotification");
+  const _component_OrDataGridTableExtraRow = resolveComponent("OrDataGridTableExtraRow");
   const _component_OrSkeletonText = resolveComponent("OrSkeletonText");
   const _component_OrDataGridTableContentCell = resolveComponent("OrDataGridTableContentCell");
   const _component_OrDataGridTableContentRow = resolveComponent("OrDataGridTableContentRow");
@@ -1298,12 +1402,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       fn: withCtx(() => [renderSlot(_ctx.$slots, 'notification')]),
       key: "0"
     } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["notification", "variant"])) : createCommentVNode("v-if", true), createVNode(_component_OrDataGridTableContent, null, {
-      default: withCtx(() => [_ctx.loading ? (openBlock(), createElementBlock(Fragment, {
-        key: 0
+      default: withCtx(() => [_ctx.$slots['before-rows'] ? (openBlock(), createBlock(_component_OrDataGridTableExtraRow, {
+        key: 0,
+        class: normalizeClass(['col-span-full border-b-1']),
+        variant: _ctx.variant
+      }, {
+        default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, 'before-rows')])]),
+        _: 3 /* FORWARDED */
+      }, 8 /* PROPS */, ["variant"])) : createCommentVNode("v-if", true), _ctx.loading ? (openBlock(), createElementBlock(Fragment, {
+        key: 1
       }, 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 +1438,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
+        key: 2
       }, 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 +1457,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 +1468,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,19 +1478,21 @@ 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,
+        key: 3,
         class: normalizeClass(['col-span-full']),
         variant: _ctx.variant
       }, {
@@ -1382,12 +1502,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         })]),
         _: 3 /* FORWARDED */
       }, 8 /* PROPS */, ["variant"])) : _ctx.$slots['empty'] ? (openBlock(), createBlock(_component_OrDataGridTablePlaceholder, {
-        key: 3,
+        key: 4,
         class: normalizeClass(['col-span-full']),
         variant: _ctx.variant
       }, {
         default: withCtx(() => [renderSlot(_ctx.$slots, 'empty')]),
         _: 3 /* FORWARDED */
+      }, 8 /* PROPS */, ["variant"])) : createCommentVNode("v-if", true), _ctx.$slots['after-rows'] ? (openBlock(), createBlock(_component_OrDataGridTableExtraRow, {
+        key: 5,
+        class: normalizeClass(['col-span-full']),
+        variant: _ctx.variant
+      }, {
+        default: withCtx(() => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, 'after-rows')])]),
+        _: 3 /* FORWARDED */
       }, 8 /* PROPS */, ["variant"])) : createCommentVNode("v-if", true)]),
       _: 3 /* FORWARDED */
     })]),

package/dist/esm/components/or-data-grid-v3/partials/index.d.ts CHANGED Viewed

@@ -13,3 +13,4 @@ export { default as OrDataGridTablePlaceholder } from './or-data-grid-table-plac
 export { default as OrDataGridTable } from './or-data-grid-table/OrDataGridTable.vue';
 export { default as OrDataGridToolbar } from './or-data-grid-toolbar/OrDataGridToolbar.vue';
 export { default as OrDataGridNotification } from './or-data-grid-notification/OrDataGridNotification.vue';
+export { default as OrDataGridTableExtraRow } from './or-data-grid-table-extra-row/OrDataGridTableExtraRow.vue';

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

@@ -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/dist/esm/components/or-data-grid-v3/partials/or-data-grid-table-extra-row/OrDataGridTableExtraRow.vue.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { PropType } from 'vue';
+import { DataGridVariant } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    variant: {
+        type: PropType<DataGridVariant>;
+        required: true;
+    };
+}, {
+    root: import("vue").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<DataGridVariant>;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;

package/dist/esm/components/or-data-grid-v3/partials/or-data-grid-table-extra-row/styles.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { DataGridVariant } from '../../types';
+export declare const DataGridTableExtraRow: string[];
+export declare const DataGridTableExtraRowVariants: Record<DataGridVariant, string[]>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "20.3.1",
+  "version": "20.5.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.5.0",
+    "@onereach/ui-components-common": "^20.5.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": "133b4d56fdf3542c0eca19ffff605f0a0fc41986"
 }