@onereach/ui-components-vue2 26.7.1-beta.5969.0 → 26.8.0

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

@@ -1696,6 +1696,10 @@ var script = defineComponent({
       type: Array,
       default: () => []
     },
+    itemKey: {
+      type: [String, Function],
+      default: 'id'
+    },
     columns: {
       type: Array,
       required: true
@@ -1745,11 +1749,11 @@ var script = defineComponent({
     // State
     const selectingIndicator = computed({
       get: () => {
-        return !!(props.items && props.items.length) && props.items.every(item => selectingModel.value.includes(item.id));
+        return !!(props.items && props.items.length) && props.items.every(item => selectingModel.value.includes(getItemId(item)));
       },
       set: value => {
         if (value && props.items) {
-          selectingModel.value = [...new Set([...selectingModel.value, ...props.items.map(item => item.id)])];
+          selectingModel.value = [...new Set([...selectingModel.value, ...props.items.map(item => getItemId(item))])];
         } else {
           selectingModel.value = [];
         }
@@ -1821,15 +1825,16 @@ var script = defineComponent({
         });
       }
     });
-    const isExpanded = item => expandedModel.value.indexOf(item.id) !== -1;
+    const isExpanded = item => expandedModel.value.indexOf(getItemId(item)) !== -1;
     const toggleExpand = item => {
       if (!item.children || item.children.length === 0) return;
+      const itemId = getItemId(item);
       const expanded = expandedModel.value;
-      const index = expanded.indexOf(item.id);
+      const index = expanded.indexOf(itemId);
       if (index === -1) {
-        expandedModel.value = [...expanded, item.id];
+        expandedModel.value = [...expanded, itemId];
       } else {
-        expandedModel.value = expanded.filter(id => id !== item.id);
+        expandedModel.value = expanded.filter(id => id !== itemId);
       }
     };
     watch(() => pagingModel.value && pagingModel.value.offset, () => {
@@ -2031,6 +2036,18 @@ var script = defineComponent({
         block: 'nearest'
       });
     }
+    function getItemValue(item, columnName) {
+      return item[columnName];
+    }
+    function getItemId(item) {
+      if (typeof props.itemKey === 'function') {
+        return props.itemKey(item);
+      }
+      return getItemValue(item, props.itemKey);
+    }
+    function setItemValue(item, columnName, value) {
+      item[columnName] = value;
+    }
     return {
       root,
       rootStyles,
@@ -2060,6 +2077,8 @@ var script = defineComponent({
       updateScrollOffset,
       removeScrollOffset,
       updateSearchingModel,
+      getItemValue,
+      getItemId,
       scrollToTop: () => {
         if (table.value && table.value.root) {
           table.value.root.scrollTo({
@@ -2070,7 +2089,7 @@ var script = defineComponent({
       },
       scrollTo,
       onInput: (item, columnName, value) => {
-        item[columnName] = value;
+        setItemValue(item, columnName, value);
         context.emit('update:item', item);
       }
     };
@@ -2248,10 +2267,10 @@ var __vue_render__ = function () {
     })], 2);
   }) : _vm.items.length > 0 ? _vm._l(_vm.actualItems, function (item) {
     return _c('OrDataGridTableContentRow', {
-      key: item.id,
+      key: _vm.getItemId(item),
       attrs: {
         "variant": _vm.variant,
-        "selected": _vm.selectingModel.includes(item.id),
+        "selected": _vm.selectingModel.includes(_vm.getItemId(item)),
         "interactive": _vm.interactiveRows
       },
       on: {
@@ -2280,15 +2299,15 @@ var __vue_render__ = function () {
       },
       on: {
         "mouseenter": function () {
-          return _vm.handleMouseEnterCell(item, 'selecting', _vm.selectingModel.indexOf(item.id) !== -1);
+          return _vm.handleMouseEnterCell(item, 'selecting', _vm.selectingModel.indexOf(_vm.getItemId(item)) !== -1);
         },
         "mouseleave": function () {
-          return _vm.handleMouseLeaveCell(item, 'selecting', _vm.selectingModel.indexOf(item.id) !== -1);
+          return _vm.handleMouseLeaveCell(item, 'selecting', _vm.selectingModel.indexOf(_vm.getItemId(item)) !== -1);
         }
       }
     }, [_c('OrCheckbox', {
       attrs: {
-        "value": item.id,
+        "value": _vm.getItemId(item),
         "disabled": _vm.selectingDisabled
       },
       model: {
@@ -2302,7 +2321,7 @@ var __vue_render__ = function () {
       return _c('OrDataGridTableContentCell', {
         key: column.name,
         attrs: {
-          "model-value": item[column.name],
+          "model-value": _vm.getItemValue(item, column.name),
           "column": column,
           "features": _vm.features,
           "sticky-offset": column.stickiness === 'start' ? _vm.stickyOffsets.start.get(column.name) : column.stickiness === 'end' ? _vm.stickyOffsets.end.get(column.name) : undefined,
@@ -2316,10 +2335,10 @@ var __vue_render__ = function () {
             return _vm.scrollTo($event);
           },
           "mouseenter": function () {
-            return _vm.handleMouseEnterCell(item, column.name, item[column.name]);
+            return _vm.handleMouseEnterCell(item, column.name, _vm.getItemValue(item, column.name));
           },
           "mouseleave": function () {
-            return _vm.handleMouseLeaveCell(item, column.name, item[column.name]);
+            return _vm.handleMouseLeaveCell(item, column.name, _vm.getItemValue(item, column.name));
           }
         }
       }, [_c('div', {
@@ -2351,7 +2370,7 @@ var __vue_render__ = function () {
         staticClass: "min-w-0",
         class: [columnIndex === 0 ? 'flex-grow' : '', column.alignment === 'end' ? 'text-end' : column.alignment === 'center' ? 'text-center' : 'text-start', (column.wrapping !== undefined && column.wrapping !== null ? column.wrapping : _vm.variant === 'dynamic' && !column.control) ? 'whitespace-pre-wrap break-words' : column.fitContent ? '' : 'truncate']
       }, [_vm._t(column.name, function () {
-        return [_vm._v(_vm._s(item[column.name]))];
+        return [_vm._v(_vm._s(_vm.getItemValue(item, column.name)))];
       }, {
         "column": column,
         "item": item

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

@@ -12,13 +12,12 @@ export type DataGridModelValue = ModelValue<{
     paging: PaginationModelValue;
     expanded: ModelValue<Id[]>;
 }>;
-export type DataGridRow<T extends DataModel = DataModel> = T & {
-    [key: string]: unknown;
-};
-export type DataGridItem<T extends DataGridRow = DataGridRow> = T & {
+export type DataGridRow<T extends object = DataModel> = T;
+export type DataGridItem<T extends object = DataGridRow> = T & {
     children?: DataGridItem<T>[];
     level?: number;
 };
+export type DataGridItemKey<T extends object = DataGridRow> = string | ((item: DataGridItem<T>) => Id);
 export type DataGridColumn = {
     name: string;
     label?: string;
@@ -42,6 +41,7 @@ export declare enum DataGridVariant {
     Compact = "compact",
     Dynamic = "dynamic"
 }
+export type DataGridVariantValue = `${DataGridVariant}`;
 export type DataGridFeatures = {
     selecting?: boolean | {
         showCounter?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components-vue2",
-  "version": "26.7.1-beta.5969.0",
+  "version": "26.8.0",
   "description": "Vue components library for v2",
   "license": "Apache-2.0",
   "sideEffects": false,
@@ -40,8 +40,8 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^26.7.1-beta.5969.0",
-    "@onereach/ui-components-common": "^26.7.1-beta.5969.0",
+    "@onereach/styles": "^26.8.0",
+    "@onereach/ui-components-common": "^26.8.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.27.1",
     "@tiptap/extension-blockquote": "2.27.1",
@@ -102,5 +102,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "npmUnpacked": "4.15.2"
+  "npmUnpacked": "4.15.2",
+  "gitHead": "0592687da00c9a1650a8748d9ef06e9f4055a04c"
 }