@onereach/ui-components-vue2 26.4.1-beta.5885.0 → 26.4.1-beta.5887.0

package/dist/esm/components/index.js

@@ -19,7 +19,7 @@ export { EditorState } from '@codemirror/state';
 export { OrCombinedInputV3 } from './or-combined-input-v3/index.js';
 export { ConfirmType, OrConfirmV3 } from './or-confirm-v3/index.js';
 export { OrContextMenuV3 } from './or-context-menu-v3/index.js';
-export { DATA_GRID_DEFAULT_MIN_WIDTH, DataGridVariant, OrDataGridFooter, OrDataGridHeader, OrDataGridNotification, OrDataGridTable, OrDataGridTableContent, OrDataGridTableContentCell, OrDataGridTableContentRow, OrDataGridTableExtraRow, OrDataGridTableFooter, OrDataGridTableFooterCell, OrDataGridTableFooterRow, OrDataGridTableHeader, OrDataGridTableHeaderCell, OrDataGridTableHeaderRow, OrDataGridTablePlaceholder, OrDataGridToolbar, OrDataGridV3 } from './or-data-grid-v3/index.js';
+export { DATA_GRID_DEFAULT_MIN_WIDTH, DATA_GRID_SELECTION_COLUMN_WIDTH, DataGridVariant, OrDataGridFooter, OrDataGridHeader, OrDataGridNotification, OrDataGridTable, OrDataGridTableContent, OrDataGridTableContentCell, OrDataGridTableContentRow, OrDataGridTableExtraRow, OrDataGridTableFooter, OrDataGridTableFooterCell, OrDataGridTableFooterRow, OrDataGridTableHeader, OrDataGridTableHeaderCell, OrDataGridTableHeaderRow, OrDataGridTablePlaceholder, OrDataGridToolbar, OrDataGridV3 } from './or-data-grid-v3/index.js';
 export { OrDateFormatV3 } from './or-date-format-v3/index.js';
 export { OrDatePickerV3 } from './or-date-picker-v3/index.js';
 export { OrDateRangePickerV3 } from './or-date-range-picker-v3/index.js';

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

@@ -196,6 +196,7 @@ var DataGridVariant;
   DataGridVariant["Dynamic"] = "dynamic";
 })(DataGridVariant || (DataGridVariant = {}));
 const DATA_GRID_DEFAULT_MIN_WIDTH = '52px';
+const DATA_GRID_SELECTION_COLUMN_WIDTH = '42px';
 
 const DataGridTableContentCell = [
 // Layout
@@ -203,7 +204,9 @@ const DataGridTableContentCell = [
 // Spacing
 'px-sm+', 'py-xs', 'gap-xs',
 // 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-border-disabled border-b-1 border-e-1 border-solid', 'dark:theme-border-disabled-dark',
+// Border (conditional override for last row/column)
+'group-last:border-b-0', 'last:border-e-0', '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)
@@ -274,34 +277,29 @@ var script$e = defineComponent({
       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(() => {
+      var _a;
+      const styles = {
+        justifyContent: ((_a = props.column) === null || _a === void 0 ? void 0 : _a.alignment) || (props.column ? undefined : 'center')
+      };
       if (props.column) {
         switch (props.column.stickiness) {
           case 'start':
-            return {
+            Object.assign(styles, {
               position: 'sticky',
               insetInlineStart: `${props.stickyOffset}px`,
-              zIndex: '30',
-              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
-              justifyContent: props.column.alignment
-            };
+              zIndex: '30'
+            });
+            break;
           case 'end':
-            return {
+            Object.assign(styles, {
               position: 'sticky',
               insetInlineEnd: `${props.stickyOffset}px`,
-              zIndex: '30',
-              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
-              justifyContent: props.column.alignment
-            };
-          default:
-            return {
-              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
-              justifyContent: props.column.alignment
-            };
+              zIndex: '30'
+            });
+            break;
         }
       }
-      return {
-        justifyContent: 'center'
-      };
+      return styles;
     });
     const contentStyles = computed(() => {
       var _a, _b, _c, _d, _e, _f;
@@ -310,10 +308,14 @@ var script$e = defineComponent({
       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,
-      maxWidth: props.column && props.column.maxWidth
-    }));
+    const contentInlineStyles = computed(() => {
+      var _a, _b;
+      return {
+        minWidth: props.column && props.column.minWidth || (((_a = props.column) === null || _a === void 0 ? void 0 : _a.name) === '_check' ? DATA_GRID_SELECTION_COLUMN_WIDTH : DATA_GRID_DEFAULT_MIN_WIDTH),
+        maxWidth: props.column && props.column.maxWidth,
+        justifyContent: ((_b = props.column) === null || _b === void 0 ? void 0 : _b.alignment) || (props.column ? undefined : 'center')
+      };
+    });
     // State
     const model = computed({
       get: () => props.modelValue,
@@ -496,8 +498,6 @@ const DataGridTableContentRow = [
 'relative z-[1]',
 // Typography
 'typography-body-2-regular',
-// Theme
-'theme-border-disabled [&:not(:last-child)]:border-b-1', 'dark:theme-border-disabled-dark',
 // Theme (children)
 'children:theme-foreground-default', 'dark:children:theme-foreground-default-dark', 'children:theme-background-default', 'dark:children:theme-background-default-dark',
 // Theme (hover / children)
@@ -835,7 +835,9 @@ const DataGridTableHeaderCell = [
 // Spacing
 'px-sm+', 'py-xs', 'gap-xs',
 // 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-border-disabled border-b-1 border-e-1 border-solid', 'dark:theme-border-disabled-dark',
+// Border (conditional override for last column)
+'last:border-e-0', 'theme-outline-transparent outline-2 -outline-offset-1', 'dark:theme-outline-transparent-dark',
 // Theme (Stacking)
 'relative hover:z-[2]',
 // Theme (.sticky-start)
@@ -877,6 +879,10 @@ var script$8 = defineComponent({
     stickyOffset: {
       type: Number,
       default: 0
+    },
+    override: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue', 'update:scrollOffset', 'remove:scrollOffset', 'update:column-width'],
@@ -899,42 +905,37 @@ var script$8 = defineComponent({
     });
     const resizeHandleStyles = computed(() => ['or-data-grid-table-header-cell-resize-handle-v3', ...DataGridTableHeaderCellResizeHandle]);
     const wrapInlineStyle = computed(() => {
-      var _a, _b;
+      var _a, _b, _c;
       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,
+        minWidth: ((_a = props.column) === null || _a === void 0 ? void 0 : _a.minWidth) || (((_b = props.column) === null || _b === void 0 ? void 0 : _b.name) === '_check' ? DATA_GRID_SELECTION_COLUMN_WIDTH : DATA_GRID_DEFAULT_MIN_WIDTH),
+        maxWidth: (_c = props.column) === null || _c === void 0 ? void 0 : _c.maxWidth,
         overflow: 'hidden'
       };
     });
     const rootInlineStyles = computed(() => {
+      var _a;
+      const styles = {
+        justifyContent: ((_a = props.column) === null || _a === void 0 ? void 0 : _a.alignment) || (props.column ? undefined : 'center')
+      };
       if (props.column) {
         switch (props.column.stickiness) {
           case 'start':
-            return {
+            Object.assign(styles, {
               position: 'sticky',
               insetInlineStart: `${props.stickyOffset}px`,
-              zIndex: '120',
-              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
-              justifyContent: props.column.alignment
-            };
+              zIndex: '120'
+            });
+            break;
           case 'end':
-            return {
+            Object.assign(styles, {
               position: 'sticky',
               insetInlineEnd: `${props.stickyOffset}px`,
-              zIndex: '120',
-              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
-              justifyContent: props.column.alignment
-            };
-          default:
-            return {
-              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
-              justifyContent: props.column.alignment
-            };
+              zIndex: '120'
+            });
+            break;
         }
       }
-      return {
-        justifyContent: 'center'
-      };
+      return styles;
     });
     // State
     const model = computed({
@@ -949,6 +950,16 @@ var script$8 = defineComponent({
         context.emit('update:modelValue', value);
       }
     });
+    const headerContentStyles = computed(() => {
+      var _a;
+      return ['layout-row items-center w-full min-w-0', ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.alignment) === 'end' ? ['flex-row-reverse'] : [])];
+    });
+    const headerContentInlineStyles = computed(() => {
+      var _a, _b;
+      return {
+        justifyContent: ((_a = props.column) === null || _a === void 0 ? void 0 : _a.alignment) === 'end' ? undefined : (_b = props.column) === null || _b === void 0 ? void 0 : _b.alignment
+      };
+    });
     // Methods
     function toggleSorting() {
       var _a;
@@ -975,15 +986,15 @@ var script$8 = defineComponent({
       const startX = event.pageX;
       const startWidth = ((_a = root.value) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
       const onMouseMove = moveEvent => {
-        var _a, _b;
+        var _a, _b, _c;
         const deltaX = moveEvent.pageX - startX;
         let newWidth = Math.max(0, startWidth + deltaX);
-        const min = ((_a = props.column) === null || _a === void 0 ? void 0 : _a.minWidth) || DATA_GRID_DEFAULT_MIN_WIDTH;
+        const min = ((_a = props.column) === null || _a === void 0 ? void 0 : _a.minWidth) || (((_b = props.column) === null || _b === void 0 ? void 0 : _b.name) === '_check' ? DATA_GRID_SELECTION_COLUMN_WIDTH : DATA_GRID_DEFAULT_MIN_WIDTH);
         if (min && (min.endsWith('px') || !isNaN(Number(min)))) {
           const minPx = parseInt(min, 10);
           newWidth = Math.max(newWidth, minPx);
         }
-        if (((_b = props.column) === null || _b === void 0 ? void 0 : _b.maxWidth) && (props.column.maxWidth.endsWith('px') || !isNaN(Number(props.column.maxWidth)))) {
+        if (((_c = props.column) === null || _c === void 0 ? void 0 : _c.maxWidth) && (props.column.maxWidth.endsWith('px') || !isNaN(Number(props.column.maxWidth)))) {
           const maxPx = parseInt(props.column.maxWidth, 10);
           newWidth = Math.min(newWidth, maxPx);
         }
@@ -1015,6 +1026,8 @@ var script$8 = defineComponent({
       root,
       rootStyles,
       rootInlineStyles,
+      headerContentStyles,
+      headerContentInlineStyles,
       wrapInlineStyle,
       resizeHandleStyles,
       isSortable,
@@ -1044,6 +1057,9 @@ var __vue_render__$8 = function () {
         return _vm.toggleSorting();
       }
     }
+  }, [_vm.override ? [_vm._t("default")] : _c('div', {
+    class: _vm.headerContentStyles,
+    style: _vm.headerContentInlineStyles
   }, [_c('div', {
     class: ['truncate'],
     style: _vm.wrapInlineStyle
@@ -1051,7 +1067,7 @@ var __vue_render__$8 = function () {
     attrs: {
       "icon": _vm.model.direction === 'asc' ? 'arrow_upward' : 'arrow_downward'
     }
-  })] : _vm._e(), _vm._v(" "), _vm.isResizable ? _c('div', {
+  })] : _vm._e()], 2), _vm._v(" "), _vm.isResizable ? _c('div', {
     class: _vm.resizeHandleStyles,
     on: {
       "mousedown": function ($event) {
@@ -1343,7 +1359,7 @@ var script$4 = defineComponent({
       });
       if (props.features.selecting) {
         return {
-          gridTemplateColumns: `${DATA_GRID_DEFAULT_MIN_WIDTH} ${gridTemplateColumns.join(' ')}`
+          gridTemplateColumns: `${DATA_GRID_SELECTION_COLUMN_WIDTH} ${gridTemplateColumns.join(' ')}`
         };
       }
       return {
@@ -1828,7 +1844,8 @@ var script = defineComponent({
       if (props.features.selecting) {
         startColumns.push({
           name: '_check',
-          stickiness: 'start'
+          stickiness: 'start',
+          alignment: 'center'
         });
       }
       actualColumns.value.forEach(column => {
@@ -2060,13 +2077,15 @@ var __vue_render__ = function () {
       "variant": _vm.variant
     }
   }, [_vm.features.selecting ? [_c('OrDataGridTableHeaderCell', {
-    staticClass: "md:!py-none",
+    staticClass: "!px-none",
     attrs: {
       "column": {
         name: '_check',
-        stickiness: 'start'
+        stickiness: 'start',
+        alignment: 'center'
       },
-      "sticky-offset": _vm.stickyOffsets.start.get('_check')
+      "sticky-offset": _vm.stickyOffsets.start.get('_check'),
+      "override": true
     },
     on: {
       "update:scroll-offset": _vm.updateScrollOffset,
@@ -2137,10 +2156,12 @@ var __vue_render__ = function () {
         "interactive": _vm.interactiveRows
       }
     }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', {
+      staticClass: "!px-none",
       attrs: {
         "column": {
           name: '_check',
-          stickiness: 'start'
+          stickiness: 'start',
+          alignment: 'center'
         },
         "sticky-offset": _vm.stickyOffsets.start.get('_check'),
         "variant": _vm.variant,
@@ -2182,11 +2203,12 @@ var __vue_render__ = function () {
         }
       }
     }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', {
-      staticClass: "md:!py-none",
+      staticClass: "!px-none",
       attrs: {
         "column": {
           name: '_check',
-          stickiness: 'start'
+          stickiness: 'start',
+          alignment: 'center'
         },
         "sticky-offset": _vm.stickyOffsets.start.get('_check'),
         "variant": _vm.variant,
@@ -2324,4 +2346,4 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
 }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
 var __vue_component__$1 = __vue_component__;
 
-export { DATA_GRID_DEFAULT_MIN_WIDTH, DataGridVariant, __vue_component__$x as OrDataGridFooter, __vue_component__$v as OrDataGridHeader, __vue_component__$5 as OrDataGridNotification, __vue_component__$9 as OrDataGridTable, __vue_component__$p as OrDataGridTableContent, __vue_component__$t as OrDataGridTableContentCell, __vue_component__$r as OrDataGridTableContentRow, __vue_component__$3 as OrDataGridTableExtraRow, __vue_component__$j as OrDataGridTableFooter, __vue_component__$n as OrDataGridTableFooterCell, __vue_component__$l as OrDataGridTableFooterRow, __vue_component__$d as OrDataGridTableHeader, __vue_component__$h as OrDataGridTableHeaderCell, __vue_component__$f as OrDataGridTableHeaderRow, __vue_component__$b as OrDataGridTablePlaceholder, __vue_component__$7 as OrDataGridToolbar, __vue_component__$1 as OrDataGridV3 };
+export { DATA_GRID_DEFAULT_MIN_WIDTH, DATA_GRID_SELECTION_COLUMN_WIDTH, DataGridVariant, __vue_component__$x as OrDataGridFooter, __vue_component__$v as OrDataGridHeader, __vue_component__$5 as OrDataGridNotification, __vue_component__$9 as OrDataGridTable, __vue_component__$p as OrDataGridTableContent, __vue_component__$t as OrDataGridTableContentCell, __vue_component__$r as OrDataGridTableContentRow, __vue_component__$3 as OrDataGridTableExtraRow, __vue_component__$j as OrDataGridTableFooter, __vue_component__$n as OrDataGridTableFooterCell, __vue_component__$l as OrDataGridTableFooterRow, __vue_component__$d as OrDataGridTableHeader, __vue_component__$h as OrDataGridTableHeaderCell, __vue_component__$f as OrDataGridTableHeaderRow, __vue_component__$b as OrDataGridTablePlaceholder, __vue_component__$7 as OrDataGridToolbar, __vue_component__$1 as OrDataGridV3 };

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

@@ -51,3 +51,4 @@ export type DataGridFeatures = {
     storageKey?: string;
 };
 export declare const DATA_GRID_DEFAULT_MIN_WIDTH = "52px";
+export declare const DATA_GRID_SELECTION_COLUMN_WIDTH = "42px";

package/dist/esm/index.js

@@ -25,7 +25,7 @@ export { EditorState } from '@codemirror/state';
 export { OrCombinedInputV3 } from './components/or-combined-input-v3/index.js';
 export { ConfirmType, OrConfirmV3 } from './components/or-confirm-v3/index.js';
 export { OrContextMenuV3 } from './components/or-context-menu-v3/index.js';
-export { DATA_GRID_DEFAULT_MIN_WIDTH, DataGridVariant, OrDataGridFooter, OrDataGridHeader, OrDataGridNotification, OrDataGridTable, OrDataGridTableContent, OrDataGridTableContentCell, OrDataGridTableContentRow, OrDataGridTableExtraRow, OrDataGridTableFooter, OrDataGridTableFooterCell, OrDataGridTableFooterRow, OrDataGridTableHeader, OrDataGridTableHeaderCell, OrDataGridTableHeaderRow, OrDataGridTablePlaceholder, OrDataGridToolbar, OrDataGridV3 } from './components/or-data-grid-v3/index.js';
+export { DATA_GRID_DEFAULT_MIN_WIDTH, DATA_GRID_SELECTION_COLUMN_WIDTH, DataGridVariant, OrDataGridFooter, OrDataGridHeader, OrDataGridNotification, OrDataGridTable, OrDataGridTableContent, OrDataGridTableContentCell, OrDataGridTableContentRow, OrDataGridTableExtraRow, OrDataGridTableFooter, OrDataGridTableFooterCell, OrDataGridTableFooterRow, OrDataGridTableHeader, OrDataGridTableHeaderCell, OrDataGridTableHeaderRow, OrDataGridTablePlaceholder, OrDataGridToolbar, OrDataGridV3 } from './components/or-data-grid-v3/index.js';
 export { OrDateFormatV3 } from './components/or-date-format-v3/index.js';
 export { OrDatePickerV3 } from './components/or-date-picker-v3/index.js';
 export { OrDateRangePickerV3 } from './components/or-date-range-picker-v3/index.js';

package/package.json

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