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

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

@@ -206,10 +206,14 @@ 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)
-'[&.sticky-end]:theme-background-default [&.sticky-end]:border-s-disabled [&.sticky-end]:border-solid', 'dark:[&.sticky-end]:theme-background-default-dark dark:[&.sticky-end]:border-s-disabled-dark', 'hover:[&.sticky-end]:theme-background-surface-1 dark:hover:[&.sticky-end]:theme-background-surface-1-dark', 'selected:[&.sticky-end]:theme-background-surface-2 dark:selected:[&.sticky-end]:theme-background-surface-2-dark', 'hover:selected:[&.sticky-end]:theme-background-surface-3 dark:hover:selected:[&.sticky-end]:theme-background-surface-3-dark'];
+'[&.sticky-end]:theme-background-default [&.sticky-end]:border-s-disabled [&.sticky-end]:border-solid', 'dark:[&.sticky-end]:theme-background-default-dark dark:[&.sticky-end]:border-s-disabled-dark', 'hover:[&.sticky-end]:theme-background-surface-1 dark:hover:[&.sticky-end]:theme-background-surface-1-dark', 'selected:[&.sticky-end]:theme-background-surface-2 dark:selected:[&.sticky-end]:theme-background-surface-2-dark', 'hover:selected:[&.sticky-end]:theme-background-surface-3 dark:hover:selected:[&.sticky-end]:theme-background-surface-3-dark',
+// Theme (.resizable)
+'[&.resizable]:border-e-disabled [&.resizable]:border-solid', 'dark:[&.resizable]:border-e-disabled-dark'];
 const DataGridTableContentCellContent = [
 // interactivity
 'interactivity-select',
@@ -262,8 +266,8 @@ var script$e = defineComponent({
     // Refs & Styles
     const root = ref();
     const rootStyles = computed(() => {
-      var _a;
-      return ['or-data-grid-table-content-cell-v3', ...DataGridTableContentCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`] : [])];
+      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'] : [])];
     });
     const rootInlineStyles = computed(() => {
       if (props.column) {
@@ -272,6 +276,7 @@ var script$e = defineComponent({
             return {
               position: 'sticky',
               insetInlineStart: '0',
+              zIndex: '30',
               flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
               justifyContent: props.column.alignment
             };
@@ -279,6 +284,7 @@ var script$e = defineComponent({
             return {
               position: 'sticky',
               insetInlineEnd: '0',
+              zIndex: '30',
               flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
               justifyContent: props.column.alignment
             };
@@ -476,6 +482,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
@@ -819,11 +827,13 @@ 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 = [
 // Position
 'absolute top-0 bottom-0 end-0 z-50',
@@ -866,12 +876,12 @@ var script$8 = defineComponent({
       return !!((_a = props.features) === null || _a === void 0 ? void 0 : _a.sorting) && !!((_b = props.column) === null || _b === void 0 ? void 0 : _b.name) && ((_c = props.column) === null || _c === void 0 ? void 0 : _c.sorting) !== false;
     });
     const isResizable = computed(() => {
-      var _a, _b;
-      return !!((_a = props.features) === null || _a === void 0 ? void 0 : _a.resizing) && !!((_b = props.column) === null || _b === void 0 ? void 0 : _b.name);
+      var _a, _b, _c;
+      return !!((_a = props.features) === null || _a === void 0 ? void 0 : _a.resizing) && !!((_b = props.column) === null || _b === void 0 ? void 0 : _b.name) && ((_c = props.column) === null || _c === void 0 ? void 0 : _c.resizing) !== false;
     });
     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}`] : []), ...(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}`] : []), ...(isResizable.value ? ['resizable'] : []), ...(isSortable.value ? ['interactivity-click'] : [])];
     });
     const resizeHandleStyles = computed(() => ['or-data-grid-table-header-cell-resize-handle-v3', ...DataGridTableHeaderCellResizeHandle]);
     const wrapInlineStyle = computed(() => {
@@ -888,6 +898,7 @@ var script$8 = defineComponent({
             return {
               position: 'sticky',
               insetInlineStart: '0',
+              zIndex: '120',
               flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
               justifyContent: props.column.alignment
             };
@@ -895,6 +906,7 @@ var script$8 = defineComponent({
             return {
               position: 'sticky',
               insetInlineEnd: '0',
+              zIndex: '120',
               flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
               justifyContent: props.column.alignment
             };
@@ -1062,7 +1074,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
@@ -1783,6 +1795,13 @@ var script = defineComponent({
       var _a;
       return ((_a = pagination.value) === null || _a === void 0 ? void 0 : _a.currentLimit) || 10;
     });
+    const columnWidths = ref({});
+    const actualColumns = computed(() => {
+      return props.columns.map(column => ({
+        ...column,
+        width: columnWidths.value[column.name] || column.width
+      }));
+    });
     // Methods
     function updateSearchingModel(value) {
       searchingModel.value = value;
@@ -1835,7 +1854,10 @@ var script = defineComponent({
       context.emit('click:row', item);
     }
     function updateColumnWidth(column, width) {
-      column.width = `${width}px`;
+      columnWidths.value = {
+        ...columnWidths.value,
+        [column.name]: `${width}px`
+      };
       if (props.features.storageKey) {
         saveColumnWidths();
       }
@@ -1843,7 +1865,7 @@ var script = defineComponent({
     function saveColumnWidths() {
       if (typeof window === 'undefined' || !props.features.storageKey) return;
       const widths = {};
-      props.columns.forEach(column => {
+      actualColumns.value.forEach(column => {
         if (column.name && column.width) {
           widths[column.name] = column.width;
         }
@@ -1856,11 +1878,7 @@ var script = defineComponent({
         const stored = localStorage.getItem(`or-data-grid-v3-widths-${props.features.storageKey}`);
         if (stored) {
           const widths = JSON.parse(stored);
-          props.columns.forEach(column => {
-            if (column.name && widths[column.name]) {
-              column.width = widths[column.name];
-            }
-          });
+          columnWidths.value = widths;
         }
       } catch (e) {
         console.error('[OrDataGrid]: Failed to load column widths from localStorage', e);
@@ -1894,6 +1912,7 @@ var script = defineComponent({
       showSelectingCouter,
       selectingDisabled,
       skeletonsLength,
+      actualColumns,
       handleMouseEnterRow,
       handleMouseLeaveRow,
       handleMouseEnterCell,
@@ -1980,7 +1999,7 @@ var __vue_render__ = function () {
     }],
     style: _vm.tableInlineStyles,
     attrs: {
-      "columns": _vm.columns,
+      "columns": _vm.actualColumns,
       "features": _vm.features
     }
   }, [_c('OrDataGridTableHeader', [_c('OrDataGridTableHeaderRow', {
@@ -2010,7 +2029,7 @@ var __vue_render__ = function () {
       },
       expression: "selectingIndicator"
     }
-  })], 1)] : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column) {
+  })], 1)] : _vm._e(), _vm._v(" "), _vm._l(_vm.actualColumns, function (column) {
     return _c('OrDataGridTableHeaderCell', {
       key: column.name,
       attrs: {
@@ -2069,7 +2088,7 @@ var __vue_render__ = function () {
         "variant": _vm.variant,
         "override": true
       }
-    }, [_c('OrSkeletonText')], 1)] : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column) {
+    }, [_c('OrSkeletonText')], 1)] : _vm._e(), _vm._v(" "), _vm._l(_vm.actualColumns, function (column) {
       return _c('OrDataGridTableContentCell', {
         key: column.name,
         attrs: {
@@ -2133,7 +2152,7 @@ var __vue_render__ = function () {
         },
         expression: "selectingModel"
       }
-    })], 1)] : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column) {
+    })], 1)] : _vm._e(), _vm._v(" "), _vm._l(_vm.actualColumns, function (column) {
       return _c('OrDataGridTableContentCell', {
         key: column.name,
         attrs: {

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

@@ -21,6 +21,7 @@ export type DataGridColumn = {
     alignment?: 'start' | 'end' | 'center';
     stickiness?: 'start' | 'end';
     sorting?: boolean;
+    resizing?: boolean;
     wrapping?: boolean;
     control?: {
         type: 'text' | 'number' | 'rating' | 'select' | 'checkbox' | 'switch' | 'date' | 'time' | 'datetime' | 'tags';

package/package.json

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