@onereach/ui-components-vue2 26.4.1-beta.5879.0 → 26.4.1-beta.5881.0

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

@@ -206,6 +206,8 @@ const DataGridTableContentCell = [
 'theme-border-transparent border-1', 'dark:theme-border-transparent-dark', 'theme-outline-transparent outline-2 -outline-offset-1', 'dark:theme-outline-transparent-dark',
 // Theme (focus)
 'focus-within:theme-border-primary', 'dark:focus-within:theme-border-primary-dark', 'focus-within:theme-outline-primary', 'dark:focus-within:theme-outline-primary-dark',
+// Theme (Stacking)
+'relative',
 // Theme (.sticky-start)
 '[&.sticky-start]:theme-background-default [&.sticky-start]:border-e-disabled [&.sticky-start]:border-solid', 'dark:[&.sticky-start]:theme-background-default-dark dark:[&.sticky-start]:border-e-disabled-dark', 'hover:[&.sticky-start]:theme-background-surface-1 dark:hover:[&.sticky-start]:theme-background-surface-1-dark', 'selected:[&.sticky-start]:theme-background-surface-2 dark:selected:[&.sticky-start]:theme-background-surface-2-dark', 'hover:selected:[&.sticky-start]:theme-background-surface-3 dark:hover:selected:[&.sticky-start]:theme-background-surface-3-dark',
 // Theme (.sticky-end)
@@ -256,6 +258,10 @@ var script$e = defineComponent({
     override: {
       type: Boolean,
       default: false
+    },
+    stickyOffset: {
+      type: Number,
+      default: 0
     }
   },
   emits: ['input'],
@@ -265,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) {
@@ -273,14 +279,16 @@ 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
             };
           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
             };
@@ -296,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,
@@ -340,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'
@@ -438,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'
     },
@@ -448,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);
@@ -478,6 +492,8 @@ var __vue_component__$t = __vue_component__$s;
 const DataGridTableContentRow = [
 // Layout
 'grid grid-cols-[subgrid] col-span-full',
+// Stacking context
+'relative z-[1]',
 // Typography
 'typography-body-2-regular',
 // Theme
@@ -821,11 +837,11 @@ const DataGridTableHeaderCell = [
 // Theme
 'theme-border-transparent border-1', 'dark:theme-border-transparent-dark', 'theme-outline-transparent outline-2 -outline-offset-1', 'dark:theme-outline-transparent-dark',
 // Theme (Stacking)
-'relative z-1 hover:z-2',
+'relative hover:z-[2]',
 // Theme (.sticky-start)
-'[&.sticky-start]:theme-background-surface-variant-1 [&.sticky-start]:border-e-disabled [&.sticky-start]:border-solid z-20 hover:z-30', 'dark:[&.sticky-start]:theme-background-surface-variant-1-dark dark:[&.sticky-start]:border-e-disabled-dark',
+'[&.sticky-start]:theme-background-surface-variant-1 [&.sticky-start]:border-e-disabled [&.sticky-start]:border-solid', 'dark:[&.sticky-start]:theme-background-surface-variant-1-dark dark:[&.sticky-start]:border-e-disabled-dark',
 // Theme (.sticky-end)
-'[&.sticky-end]:theme-background-surface-variant-1 [&.sticky-end]:border-s-disabled [&.sticky-end]:border-solid z-20 hover:z-30', 'dark:[&.sticky-end]:theme-background-surface-variant-1-dark dark:[&.sticky-end]:border-s-disabled-dark',
+'[&.sticky-end]:theme-background-surface-variant-1 [&.sticky-end]:border-s-disabled [&.sticky-end]:border-solid', 'dark:[&.sticky-end]:theme-background-surface-variant-1-dark dark:[&.sticky-end]:border-s-disabled-dark',
 // Theme (.resizable)
 '[&.resizable]:border-e-disabled [&.resizable]:border-solid', 'dark:[&.resizable]:border-e-disabled-dark'];
 const DataGridTableHeaderCellResizeHandle = [
@@ -857,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'],
@@ -875,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(() => {
@@ -891,14 +911,16 @@ 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
             };
           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
             };
@@ -1066,7 +1088,7 @@ var __vue_component__$h = __vue_component__$g;
 
 const DataGridTableHeaderRow = [
 // Position
-'sticky top-0 z-10',
+'sticky top-0 z-[110]',
 // Layout
 'grid grid-cols-[subgrid] col-span-full',
 // Typography
@@ -1775,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);
     });
@@ -1794,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;
@@ -1801,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;
       }
     }
@@ -1883,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
@@ -1916,6 +1972,7 @@ var script = defineComponent({
       searchingModel,
       sortingModel,
       pagingModel,
+      stickyOffsets,
       updateScrollOffset,
       removeScrollOffset,
       updateSearchingModel,
@@ -2002,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,
@@ -2026,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,
@@ -2075,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
       }
@@ -2086,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
         }
@@ -2118,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'
@@ -2151,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.5879.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.5879.0",
-    "@onereach/ui-components-common": "^26.4.1-beta.5879.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",