@onereach/ui-components-vue2 26.4.1-beta.5880.0 → 26.4.1-beta.5881.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) ? [`sticky-${props.column.stickiness}`, 'overflow-hidden'] : []), ...(!!((_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 isSticky = !!((_d = props.column) === null || _d === void 0 ? void 0 : _d.stickiness);
+      const isTags = ((_f = (_e = props.column) === null || _e === void 0 ? void 0 : _e.control) === null || _f === void 0 ? void 0 : _f.type) === 'tags';
+      return ['layout-row items-center w-full min-w-0', ...(isSticky || isTags ? ['overflow-hidden'] : []), ...DataGridTableContentCellContent.filter(style => style !== 'truncate'), ...(isWrapping ? ['whitespace-pre-wrap break-words'] : ['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,7 +895,7 @@ 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) ? [`sticky-${props.column.stickiness}`, 'overflow-hidden'] : []), ...(isResizable.value ? ['resizable'] : []), ...(isSortable.value ? ['interactivity-click'] : [])];
     });
     const resizeHandleStyles = computed(() => ['or-data-grid-table-header-cell-resize-handle-v3', ...DataGridTableHeaderCellResizeHandle]);
     const wrapInlineStyle = computed(() => {
@@ -897,7 +911,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 +919,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
@@ -1783,8 +1797,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 +1814,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 +1857,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 +1939,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 +1972,7 @@ var script = defineComponent({
       searchingModel,
       sortingModel,
       pagingModel,
+      stickyOffsets,
       updateScrollOffset,
       removeScrollOffset,
       updateSearchingModel,
@@ -2010,8 +2059,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 +2085,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 +2135,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 +2148,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 +2181,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 +2216,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/package.json

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