@onereach/ui-components-vue2 26.4.1-beta.5880.0 → 26.4.1-beta.5882.0

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

@@ -258,6 +258,10 @@ var script$e = defineComponent({
     override: {
       type: Boolean,
       default: false
+    },
+    stickyOffset: {
+      type: Number,
+      default: 0
     }
   },
   emits: ['input'],
@@ -267,7 +271,7 @@ var script$e = defineComponent({
     const root = ref();
     const rootStyles = computed(() => {
       var _a, _b, _c, _d;
-      return ['or-data-grid-table-content-cell-v3', ...DataGridTableContentCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`] : []), ...(!!((_b = props.features) === null || _b === void 0 ? void 0 : _b.resizing) && !!((_c = props.column) === null || _c === void 0 ? void 0 : _c.name) && ((_d = props.column) === null || _d === void 0 ? void 0 : _d.resizing) !== false ? ['resizable'] : [])];
+      return ['or-data-grid-table-content-cell-v3', ...DataGridTableContentCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? ['overflow-hidden', `sticky-${props.column.stickiness}`] : []), ...(!!((_b = props.features) === null || _b === void 0 ? void 0 : _b.resizing) && !!((_c = props.column) === null || _c === void 0 ? void 0 : _c.name) && ((_d = props.column) === null || _d === void 0 ? void 0 : _d.resizing) !== false ? ['resizable'] : [])];
     });
     const rootInlineStyles = computed(() => {
       if (props.column) {
@@ -275,7 +279,7 @@ var script$e = defineComponent({
           case 'start':
             return {
               position: 'sticky',
-              insetInlineStart: '0',
+              insetInlineStart: `${props.stickyOffset}px`,
               zIndex: '30',
               flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
               justifyContent: props.column.alignment
@@ -283,7 +287,7 @@ var script$e = defineComponent({
           case 'end':
             return {
               position: 'sticky',
-              insetInlineEnd: '0',
+              insetInlineEnd: `${props.stickyOffset}px`,
               zIndex: '30',
               flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
               justifyContent: props.column.alignment
@@ -300,9 +304,11 @@ var script$e = defineComponent({
       };
     });
     const contentStyles = computed(() => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e, _f;
       const isWrapping = (_b = (_a = props.column) === null || _a === void 0 ? void 0 : _a.wrapping) !== null && _b !== void 0 ? _b : props.variant === DataGridVariant.Dynamic && !((_c = props.column) === null || _c === void 0 ? void 0 : _c.control);
-      return [...DataGridTableContentCellContent.filter(style => style !== 'truncate'), ...(isWrapping ? ['whitespace-pre-wrap break-words'] : ['truncate'])];
+      const isTags = ((_e = (_d = props.column) === null || _d === void 0 ? void 0 : _d.control) === null || _e === void 0 ? void 0 : _e.type) === 'tags';
+      const isFitContent = (_f = props.column) === null || _f === void 0 ? void 0 : _f.fitContent;
+      return ['layout-row items-center w-full min-w-0', ...(isTags ? ['overflow-hidden'] : []), ...DataGridTableContentCellContent.filter(style => style !== 'truncate'), ...(isWrapping ? ['whitespace-pre-wrap break-words'] : isFitContent ? ['overflow-hidden'] : ['truncate'])];
     });
     const contentInlineStyles = computed(() => ({
       minWidth: props.column && props.column.minWidth || DATA_GRID_DEFAULT_MIN_WIDTH,
@@ -344,7 +350,10 @@ var __vue_render__$e = function () {
     ref: 'root',
     class: _vm.rootStyles,
     style: _vm.rootInlineStyles
-  }, [_vm.override ? [_vm._t("default")] : _vm.control ? [_vm.control.type === 'text' ? [_c('OrInput', {
+  }, [_vm.override ? [_vm._t("default")] : _vm.control ? [_c('div', {
+    class: _vm.contentStyles,
+    style: _vm.contentInlineStyles
+  }, [_vm.control.type === 'text' ? [_c('OrInput', {
     attrs: {
       "type": 'text',
       "variant": 'embedded'
@@ -442,6 +451,7 @@ var __vue_render__$e = function () {
       expression: "model"
     }
   })] : _vm._e(), _vm._v(" "), _vm.control.type === 'tags' ? [_c('OrTagInput', {
+    class: ['grow min-w-0'],
     attrs: {
       "variant": 'embedded'
     },
@@ -452,7 +462,7 @@ var __vue_render__$e = function () {
       },
       expression: "model"
     }
-  })] : _vm._e()] : [_c('div', {
+  })] : _vm._e()], 2)] : [_c('div', {
     class: _vm.contentStyles,
     style: _vm.contentInlineStyles
   }, [_vm._t("default")], 2)]], 2);
@@ -863,6 +873,10 @@ var script$8 = defineComponent({
     features: {
       type: Object,
       default: undefined
+    },
+    stickyOffset: {
+      type: Number,
+      default: 0
     }
   },
   emits: ['update:modelValue', 'update:scrollOffset', 'remove:scrollOffset', 'update:column-width'],
@@ -881,14 +895,15 @@ var script$8 = defineComponent({
     });
     const rootStyles = computed(() => {
       var _a;
-      return ['or-data-grid-table-header-cell-v3', 'relative', ...DataGridTableHeaderCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`] : []), ...(isResizable.value ? ['resizable'] : []), ...(isSortable.value ? ['interactivity-click'] : [])];
+      return ['or-data-grid-table-header-cell-v3', 'relative', ...DataGridTableHeaderCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? ['overflow-hidden', `sticky-${props.column.stickiness}`] : []), ...(isResizable.value ? ['resizable'] : []), ...(isSortable.value ? ['interactivity-click'] : [])];
     });
     const resizeHandleStyles = computed(() => ['or-data-grid-table-header-cell-resize-handle-v3', ...DataGridTableHeaderCellResizeHandle]);
     const wrapInlineStyle = computed(() => {
       var _a, _b;
       return {
         minWidth: ((_a = props.column) === null || _a === void 0 ? void 0 : _a.minWidth) || DATA_GRID_DEFAULT_MIN_WIDTH,
-        maxWidth: (_b = props.column) === null || _b === void 0 ? void 0 : _b.maxWidth
+        maxWidth: (_b = props.column) === null || _b === void 0 ? void 0 : _b.maxWidth,
+        overflow: 'hidden'
       };
     });
     const rootInlineStyles = computed(() => {
@@ -897,7 +912,7 @@ var script$8 = defineComponent({
           case 'start':
             return {
               position: 'sticky',
-              insetInlineStart: '0',
+              insetInlineStart: `${props.stickyOffset}px`,
               zIndex: '120',
               flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
               justifyContent: props.column.alignment
@@ -905,7 +920,7 @@ var script$8 = defineComponent({
           case 'end':
             return {
               position: 'sticky',
-              insetInlineEnd: '0',
+              insetInlineEnd: `${props.stickyOffset}px`,
               zIndex: '120',
               flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
               justifyContent: props.column.alignment
@@ -1316,8 +1331,11 @@ var script$4 = defineComponent({
           return column.width;
         }
         const width = (_a = column.width) !== null && _a !== void 0 ? _a : '1fr';
-        const min = column.minWidth || (column.width ? DATA_GRID_DEFAULT_MIN_WIDTH : '120px');
-        let max = column.maxWidth || width;
+        const min = column.minWidth || (column.width ? DATA_GRID_DEFAULT_MIN_WIDTH : column.fitContent ? 'max-content' : column.stickiness ? 'max-content' : '120px');
+        const max = column.maxWidth || (column.width ? width === 'max-content' ? 'max-content' : width : column.fitContent ? 'max-content' : column.minWidth || column.stickiness ? 'max-content' : '1fr');
+        if (column.fitContent) {
+          return 'max-content';
+        }
         if (width.endsWith('px')) {
           return width;
         }
@@ -1783,8 +1801,6 @@ var script = defineComponent({
         });
       }
     });
-    const scrollOffsetStart = ref(new Map());
-    const scrollOffsetEnd = ref(new Map());
     const showSelectingCouter = computed(() => {
       return props.features.selecting && (typeof props.features.selecting === 'object' ? props.features.selecting.showCounter !== false : true);
     });
@@ -1802,6 +1818,42 @@ var script = defineComponent({
         width: columnWidths.value[column.name] || column.width
       }));
     });
+    const scrollOffsetStart = ref(new Map());
+    const scrollOffsetEnd = ref(new Map());
+    const stickyOffsets = computed(() => {
+      const start = new Map();
+      const end = new Map();
+      const startColumns = [];
+      const endColumns = [];
+      if (props.features.selecting) {
+        startColumns.push({
+          name: '_check',
+          stickiness: 'start'
+        });
+      }
+      actualColumns.value.forEach(column => {
+        if (column.stickiness === 'start') {
+          startColumns.push(column);
+        } else if (column.stickiness === 'end') {
+          endColumns.push(column);
+        }
+      });
+      let currentStartOffset = 0;
+      startColumns.forEach(column => {
+        start.set(column.name, currentStartOffset);
+        currentStartOffset += scrollOffsetStart.value.get(column.name) || 0;
+      });
+      let currentEndOffset = 0;
+      // End columns are stacked from right to left
+      [...endColumns].reverse().forEach(column => {
+        end.set(column.name, currentEndOffset);
+        currentEndOffset += scrollOffsetEnd.value.get(column.name) || 0;
+      });
+      return {
+        start,
+        end
+      };
+    });
     // Methods
     function updateSearchingModel(value) {
       searchingModel.value = value;
@@ -1809,19 +1861,19 @@ var script = defineComponent({
     function updateScrollOffset(header, offset, column) {
       switch (column.stickiness) {
         case 'start':
-          scrollOffsetStart.value.set(header, offset);
+          scrollOffsetStart.value.set(column.name, offset);
           scrollOffsetStart.value = new Map(scrollOffsetStart.value);
-          scrollOffsetEnd.value.delete(header);
+          scrollOffsetEnd.value.delete(column.name);
           scrollOffsetEnd.value = new Map(scrollOffsetEnd.value);
           break;
         case 'end':
-          scrollOffsetStart.value.delete(header);
+          scrollOffsetStart.value.delete(column.name);
           scrollOffsetStart.value = new Map(scrollOffsetStart.value);
-          scrollOffsetEnd.value.set(header, offset);
+          scrollOffsetEnd.value.set(column.name, offset);
           scrollOffsetEnd.value = new Map(scrollOffsetEnd.value);
           break;
         default:
-          removeScrollOffset(header);
+          removeScrollOffset(column.name);
           break;
       }
     }
@@ -1891,10 +1943,10 @@ var script = defineComponent({
     //   if (!props.interactiveRows) return;
     //   context.emit('click:cell', { item, columnName, value });
     // }
-    function removeScrollOffset(header) {
-      scrollOffsetStart.value.delete(header);
+    function removeScrollOffset(name) {
+      scrollOffsetStart.value.delete(name);
       scrollOffsetStart.value = new Map(scrollOffsetStart.value);
-      scrollOffsetEnd.value.delete(header);
+      scrollOffsetEnd.value.delete(name);
       scrollOffsetEnd.value = new Map(scrollOffsetEnd.value);
     }
     // Helpers
@@ -1924,6 +1976,7 @@ var script = defineComponent({
       searchingModel,
       sortingModel,
       pagingModel,
+      stickyOffsets,
       updateScrollOffset,
       removeScrollOffset,
       updateSearchingModel,
@@ -2010,8 +2063,10 @@ var __vue_render__ = function () {
     staticClass: "md:!py-none",
     attrs: {
       "column": {
+        name: '_check',
         stickiness: 'start'
-      }
+      },
+      "sticky-offset": _vm.stickyOffsets.start.get('_check')
     },
     on: {
       "update:scroll-offset": _vm.updateScrollOffset,
@@ -2034,7 +2089,8 @@ var __vue_render__ = function () {
       key: column.name,
       attrs: {
         "column": column,
-        "features": _vm.features
+        "features": _vm.features,
+        "sticky-offset": column.stickiness === 'start' ? _vm.stickyOffsets.start.get(column.name) : column.stickiness === 'end' ? _vm.stickyOffsets.end.get(column.name) : undefined
       },
       on: {
         "update:scroll-offset": _vm.updateScrollOffset,
@@ -2083,8 +2139,10 @@ var __vue_render__ = function () {
     }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', {
       attrs: {
         "column": {
+          name: '_check',
           stickiness: 'start'
         },
+        "sticky-offset": _vm.stickyOffsets.start.get('_check'),
         "variant": _vm.variant,
         "override": true
       }
@@ -2094,6 +2152,7 @@ var __vue_render__ = function () {
         attrs: {
           "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,
           "variant": _vm.variant,
           "override": true
         }
@@ -2126,8 +2185,10 @@ var __vue_render__ = function () {
       staticClass: "md:!py-none",
       attrs: {
         "column": {
+          name: '_check',
           stickiness: 'start'
         },
+        "sticky-offset": _vm.stickyOffsets.start.get('_check'),
         "variant": _vm.variant,
         "override": true,
         "force-state": 'none'
@@ -2159,6 +2220,7 @@ var __vue_render__ = function () {
           "model-value": 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,
           "variant": _vm.variant
         },
         on: {

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

@@ -23,6 +23,7 @@ export type DataGridColumn = {
     sorting?: boolean;
     resizing?: boolean;
     wrapping?: boolean;
+    fitContent?: boolean;
     control?: {
         type: 'text' | 'number' | 'rating' | 'select' | 'checkbox' | 'switch' | 'date' | 'time' | 'datetime' | 'tags';
         options?: SelectItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components-vue2",
-  "version": "26.4.1-beta.5880.0",
+  "version": "26.4.1-beta.5882.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.4.1-beta.5880.0",
-    "@onereach/ui-components-common": "^26.4.1-beta.5880.0",
+    "@onereach/styles": "^26.4.1-beta.5882.0",
+    "@onereach/ui-components-common": "^26.4.1-beta.5882.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.27.1",
     "@tiptap/extension-blockquote": "2.27.1",