@onereach/ui-components 11.3.1 → 11.3.2-beta.4417.0

package/dist/bundled/v3/components/{OrPaginationV3-a460d1bb.js → OrPaginationV3-4576ee90.js}

@@ -1,4 +1,4 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createTextVNode, createVNode, withCtx, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from 'vue';
 import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import { s as script$1 } from './OrButtonV3-c8e5a5de.js';
 import { s as script$2 } from './OrIconV3-b5c97ea7.js';
@@ -7,7 +7,7 @@ import { s as script$4 } from './OrMenuItemV3-83001ba3.js';
 import { useProxyModelValue } from '../hooks/useProxyModelValue.js';
 import useResponsive from '../hooks/useResponsive/useResponsive.js';
 
-const PaginationRoot = [
+const Pagination = [
 // Layout
 'layout-row',
 // Spacing
@@ -16,16 +16,6 @@ const PaginationRoot = [
 'typography-caption-regular',
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
-const PaginationOffsetControl = [
-// Layout
-'layout-row',
-// Spacing
-'gap-md'];
-const PaginationLimitControl = [
-// Layout
-'layout-row',
-// Spacing
-'gap-sm'];
 const PaginationItem = [
 // Typography
 'typography-caption-regular',
@@ -56,13 +46,21 @@ var script = defineComponent({
     options: {
       type: Array,
       default: () => [50, 20, 10, 5]
+    },
+    features: {
+      type: Object,
+      default: () => ({
+        limit: true,
+        range: true
+      })
     }
   },
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-pagination-v3', ...Pagination]);
     const limitButton = ref();
     const limitButtonRoot = computed(() => {
       var _a;
@@ -73,20 +71,26 @@ var script = defineComponent({
       var _a;
       return (_a = limitMenu.value) === null || _a === void 0 ? void 0 : _a.root;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-pagination-v3', ...PaginationRoot]);
-    const offsetControlStyles = computed(() => [...PaginationOffsetControl]);
-    const limitControlStyles = computed(() => [...PaginationLimitControl]);
+    const offsetButton = ref();
+    const offsetButtonRoot = computed(() => {
+      var _a;
+      return (_a = offsetButton.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const offsetMenu = ref();
+    const offsetMenuRoot = computed(() => {
+      var _a;
+      return (_a = offsetMenu.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
     const itemStyles = computed(() => [...PaginationItem]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const currentLimit = computed({
       get: () => {
         var _a, _b;
-        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : props.options[0];
+        return (_b = (_a = model.value) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : props.options[0];
       },
       set: value => {
-        proxyModelValue.value = {
+        model.value = {
           limit: value,
           offset: 0
         };
@@ -95,10 +99,10 @@ var script = defineComponent({
     const currentOffset = computed({
       get: () => {
         var _a, _b;
-        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : 0;
+        return (_b = (_a = model.value) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : 0;
       },
       set: value => {
-        proxyModelValue.value = {
+        model.value = {
           limit: currentLimit.value,
           offset: value
         };
@@ -161,15 +165,17 @@ var script = defineComponent({
     } = useResponsive();
     return {
       root,
+      rootStyles,
       limitButton,
       limitButtonRoot,
       limitMenu,
       limitMenuRoot,
-      rootStyles,
-      offsetControlStyles,
-      limitControlStyles,
+      offsetButton,
+      offsetButtonRoot,
+      offsetMenu,
+      offsetMenuRoot,
       itemStyles,
-      proxyModelValue,
+      model,
       currentLimit,
       currentOffset,
       currentPage,
@@ -185,6 +191,16 @@ var script = defineComponent({
   }
 });
 
+const _hoisted_1 = {
+  class: /*#__PURE__*/normalizeClass(['layout-row', 'gap-md', 'shrink-0'])
+};
+const _hoisted_2 = {
+  key: 0,
+  class: /*#__PURE__*/normalizeClass(['layout-row', 'gap-sm'])
+};
+const _hoisted_3 = {
+  class: /*#__PURE__*/normalizeClass(['layout-row', 'gap-md', 'shrink-0'])
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");
   const _component_OrButton = resolveComponent("OrButton");
@@ -193,22 +209,56 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
-  }, [createElementVNode("div", {
-    class: normalizeClass(_ctx.offsetControlStyles)
-  }, [createVNode(_component_OrButton, {
+  }, [createElementVNode("div", _hoisted_1, [_ctx.features.limit ? (openBlock(), createElementBlock("div", _hoisted_2, [createTextVNode(" Per page: "), createVNode(_component_OrButton, {
+    ref: 'limitButton',
+    class: normalizeClass(_ctx.itemStyles),
+    variant: 'link',
+    color: 'inherit',
+    activated: true,
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.limitMenu && _ctx.limitMenu.open())
+  }, {
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentLimit) + " ", 1 /* TEXT */), createVNode(_component_OrIcon, {
+      icon: _ctx.limitMenu && _ctx.limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
+    }, null, 8 /* PROPS */, ["icon"])]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["class"]), createVNode(_component_OrMenu, {
+    ref: 'limitMenu',
+    "additional-styles": ['min-w-[60px]'],
+    trigger: _ctx.limitButtonRoot,
+    placement: 'top'
+  }, {
+    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, limit => {
+      return openBlock(), createBlock(_component_OrMenuItem, {
+        key: limit,
+        selected: _ctx.currentLimit === limit,
+        onClick: $event => {
+          _ctx.currentLimit = limit;
+          _ctx.limitMenu && _ctx.limitMenu.close();
+        }
+      }, {
+        default: withCtx(() => [createTextVNode(toDisplayString(limit), 1 /* TEXT */)]),
+
+        _: 2 /* DYNAMIC */
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "onClick"]);
+    }), 128 /* KEYED_FRAGMENT */))]),
+
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger"])])) : createCommentVNode("v-if", true), _ctx.features.range ? (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [createTextVNode(toDisplayString(_ctx.currentOffset + 1) + "-" + toDisplayString(Math.min(_ctx.currentOffset + _ctx.currentLimit, _ctx.length)) + " of " + toDisplayString(_ctx.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_3, [createVNode(_component_OrButton, {
     class: normalizeClass(_ctx.itemStyles),
     variant: 'link',
     color: 'inherit',
     disabled: _ctx.currentPage === _ctx.firstPage,
-    onClick: _cache[0] || (_cache[0] = $event => _ctx.toPreviousPage())
+    onClick: _cache[1] || (_cache[1] = $event => _ctx.toPreviousPage())
   }, {
     default: withCtx(() => [createVNode(_component_OrIcon, {
       icon: 'keyboard_arrow_left'
     })]),
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["class", "disabled"]), _ctx.isDesktop ? (openBlock(), createElementBlock(Fragment, {
+  }, 8 /* PROPS */, ["class", "disabled"]), _ctx.isDesktop ? (openBlock(true), createElementBlock(Fragment, {
     key: 0
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.buttonGroup, (page, index) => {
+  }, renderList(_ctx.buttonGroup, (page, index) => {
     return openBlock(), createBlock(_component_OrButton, {
       key: index,
       class: normalizeClass(_ctx.itemStyles),
@@ -221,58 +271,43 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
       _: 2 /* DYNAMIC */
     }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "activated", "onClick"]);
-  }), 128 /* KEYED_FRAGMENT */)), createVNode(_component_OrButton, {
-    class: normalizeClass(_ctx.itemStyles),
-    variant: 'link',
-    color: 'inherit',
-    disabled: _ctx.currentPage === _ctx.lastPage,
-    onClick: _cache[1] || (_cache[1] = $event => _ctx.toNextPage())
-  }, {
-    default: withCtx(() => [createVNode(_component_OrIcon, {
-      icon: 'keyboard_arrow_right'
-    })]),
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["class", "disabled"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */), createElementVNode("div", {
-    class: normalizeClass(_ctx.limitControlStyles)
-  }, [_ctx.isDesktop ? (openBlock(), createElementBlock(Fragment, {
-    key: 0
-  }, [createTextVNode(" Per page: ")], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), createVNode(_component_OrButton, {
-    ref: 'limitButton',
+  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.isMobile ? (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [createVNode(_component_OrButton, {
+    ref: 'offsetButton',
     class: normalizeClass(_ctx.itemStyles),
     variant: 'link',
     color: 'inherit',
     activated: true,
-    onClick: _cache[2] || (_cache[2] = $event => _ctx.limitMenu && _ctx.limitMenu.open())
+    onClick: _cache[2] || (_cache[2] = $event => _ctx.offsetMenu && _ctx.offsetMenu.open())
   }, {
-    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentLimit) + " ", 1 /* TEXT */), createVNode(_component_OrIcon, {
-      icon: _ctx.limitMenu && _ctx.limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentPage) + " ", 1 /* TEXT */), createVNode(_component_OrIcon, {
+      icon: _ctx.offsetMenu && _ctx.offsetMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
     }, null, 8 /* PROPS */, ["icon"])]),
     _: 1 /* STABLE */
   }, 8 /* PROPS */, ["class"]), createVNode(_component_OrMenu, {
-    ref: 'limitMenu',
+    ref: 'offsetMenu',
     "additional-styles": ['min-w-[60px]'],
-    trigger: _ctx.limitButtonRoot,
+    trigger: _ctx.offsetButtonRoot,
     placement: 'top'
   }, {
-    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, pageSize => {
+    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.lastPage, page => {
       return openBlock(), createBlock(_component_OrMenuItem, {
-        key: pageSize,
+        key: page,
+        selected: _ctx.currentPage === page,
         onClick: $event => {
-          _ctx.currentLimit = pageSize;
-          _ctx.limitMenu && _ctx.limitMenu.close();
+          _ctx.currentPage = page;
+          _ctx.offsetMenu && _ctx.offsetMenu.close();
         }
       }, {
-        default: withCtx(() => [createTextVNode(toDisplayString(pageSize), 1 /* TEXT */)]),
+        default: withCtx(() => [createTextVNode(toDisplayString(page), 1 /* TEXT */)]),
 
         _: 2 /* DYNAMIC */
-      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "onClick"]);
     }), 128 /* KEYED_FRAGMENT */))]),
 
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])], 2 /* CLASS */), _ctx.isMobile ? (openBlock(), createElementBlock("div", {
-    key: 0,
-    class: normalizeClass(_ctx.offsetControlStyles)
-  }, [createVNode(_component_OrButton, {
+  }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), createVNode(_component_OrButton, {
     class: normalizeClass(_ctx.itemStyles),
     variant: 'link',
     color: 'inherit',
@@ -283,10 +318,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       icon: 'keyboard_arrow_right'
     })]),
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["class", "disabled"])], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+  }, 8 /* PROPS */, ["class", "disabled"])])], 2 /* CLASS */);
 }
 
 script.render = render;
 script.__file = "src/components/or-pagination-v3/OrPagination.vue";
 
-export { PaginationRoot as P, PaginationOffsetControl as a, PaginationLimitControl as b, PaginationItem as c, script as s };
+export { Pagination as P, PaginationItem as a, script as s };

package/dist/bundled/v3/components/index.js

@@ -24,7 +24,7 @@ export { s as OrCombinedInputV3 } from './OrCombinedInputV3-d40e62b4.js';
 export { s as OrConfirm } from './OrConfirm-bd123cb5.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirmV3-eec76b11.js';
 export { default as OrContextMenuV3 } from './OrContextMenuV3/OrContextMenu.js';
-export { D as DataGridVariant, s as OrDataGridV3 } from './OrDataGridV3-ab1277d5.js';
+export { D as DataGridVariant, s as OrDataGridV3 } from './OrDataGridV3-53537045.js';
 export { s as OrDateFormatV3 } from './OrDateFormatV3-658550ce.js';
 export { s as OrDatePickerV3 } from './OrDatePickerV3-066be001.js';
 export { s as OrDateRangePickerV3 } from './OrDateRangePickerV3-6811c529.js';
@@ -71,7 +71,7 @@ export { default as OrNumberInput } from './OrNumberInput/OrNumberInput.js';
 export { default as OrOverflowMenu } from './OrOverflowMenu/OrOverflowMenu.js';
 export { default as OrOverlay } from './OrOverlay/OrOverlay.js';
 export { s as OrOverlayV3 } from './OrOverlayV3-275d0680.js';
-export { s as OrPaginationV3 } from './OrPaginationV3-a460d1bb.js';
+export { s as OrPaginationV3 } from './OrPaginationV3-4576ee90.js';
 export { default as OrPassword } from './OrPassword/OrPassword.js';
 export { s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, i as isPrevented } from './OrPopoverV3-7ef8c72d.js';
 export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-e6b79b1d.js';

package/dist/bundled/v3/index.js

@@ -16,7 +16,7 @@ export { s as OrCombinedInputV3 } from './components/OrCombinedInputV3-d40e62b4.
 export { s as OrConfirm } from './components/OrConfirm-bd123cb5.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './components/OrConfirmV3-eec76b11.js';
 export { default as OrContextMenuV3 } from './components/OrContextMenuV3/OrContextMenu.js';
-export { D as DataGridVariant, s as OrDataGridV3 } from './components/OrDataGridV3-ab1277d5.js';
+export { D as DataGridVariant, s as OrDataGridV3 } from './components/OrDataGridV3-53537045.js';
 export { s as OrDateFormatV3 } from './components/OrDateFormatV3-658550ce.js';
 export { s as OrDatePickerV3 } from './components/OrDatePickerV3-066be001.js';
 export { s as OrDateRangePickerV3 } from './components/OrDateRangePickerV3-6811c529.js';
@@ -107,7 +107,7 @@ export { s as OrModal, O as OrModalSizes } from './components/OrModal-101a726d.j
 export { M as ModalSize, s as OrModalV3 } from './components/OrModalV3-ab4d21f5.js';
 export { default as OrOverlay } from './components/OrOverlay/OrOverlay.js';
 export { s as OrOverlayV3 } from './components/OrOverlayV3-275d0680.js';
-export { s as OrPaginationV3 } from './components/OrPaginationV3-a460d1bb.js';
+export { s as OrPaginationV3 } from './components/OrPaginationV3-4576ee90.js';
 export { s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, i as isPrevented } from './components/OrPopoverV3-7ef8c72d.js';
 export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './components/OrProgress-e6b79b1d.js';
 export { s as OrRadioV3 } from './components/OrRadioV3-813551a4.js';

package/dist/esm/v2/{OrDataGrid-1bdd2499.js → OrDataGrid-9e29b831.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { _ as __vue_component__$1 } from './OrCheckbox-2536a62d.js';
-import { _ as __vue_component__$f } from './OrPagination-1b153a54.js';
+import { _ as __vue_component__$f } from './OrPagination-2d6fbd4b.js';
 import { _ as __vue_component__$g } from './OrSearch-5e325974.js';
 import { _ as __vue_component__$2, a as __vue_component__$3, b as __vue_component__$4, c as __vue_component__$5, d as __vue_component__$6, e as __vue_component__$7, f as __vue_component__$8, g as __vue_component__$9, h as __vue_component__$a, i as __vue_component__$b, j as __vue_component__$c, k as __vue_component__$d, l as __vue_component__$e, D as DataGridVariant } from './OrDataGridToolbar-4611a09b.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrPagination-1b153a54.js → OrPagination-2d6fbd4b.js}

@@ -12,7 +12,7 @@ import { _ as __vue_component__$4 } from './OrMenuItem-fd2b15dc.js';
 import { _ as __vue_component__$3 } from './OrMenu-c44856c5.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
-const PaginationRoot = [
+const Pagination = [
 // Layout
 'layout-row',
 // Spacing
@@ -21,16 +21,6 @@ const PaginationRoot = [
 'typography-caption-regular',
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
-const PaginationOffsetControl = [
-// Layout
-'layout-row',
-// Spacing
-'gap-md'];
-const PaginationLimitControl = [
-// Layout
-'layout-row',
-// Spacing
-'gap-sm'];
 const PaginationItem = [
 // Typography
 'typography-caption-regular',
@@ -61,13 +51,21 @@ var script = defineComponent({
     options: {
       type: Array,
       default: () => [50, 20, 10, 5]
+    },
+    features: {
+      type: Object,
+      default: () => ({
+        limit: true,
+        range: true
+      })
     }
   },
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-pagination-v3', ...Pagination]);
     const limitButton = ref();
     const limitButtonRoot = computed(() => {
       var _a;
@@ -78,20 +76,26 @@ var script = defineComponent({
       var _a;
       return (_a = limitMenu.value) === null || _a === void 0 ? void 0 : _a.root;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-pagination-v3', ...PaginationRoot]);
-    const offsetControlStyles = computed(() => [...PaginationOffsetControl]);
-    const limitControlStyles = computed(() => [...PaginationLimitControl]);
+    const offsetButton = ref();
+    const offsetButtonRoot = computed(() => {
+      var _a;
+      return (_a = offsetButton.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const offsetMenu = ref();
+    const offsetMenuRoot = computed(() => {
+      var _a;
+      return (_a = offsetMenu.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
     const itemStyles = computed(() => [...PaginationItem]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const currentLimit = computed({
       get: () => {
         var _a, _b;
-        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : props.options[0];
+        return (_b = (_a = model.value) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : props.options[0];
       },
       set: value => {
-        proxyModelValue.value = {
+        model.value = {
           limit: value,
           offset: 0
         };
@@ -100,10 +104,10 @@ var script = defineComponent({
     const currentOffset = computed({
       get: () => {
         var _a, _b;
-        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : 0;
+        return (_b = (_a = model.value) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : 0;
       },
       set: value => {
-        proxyModelValue.value = {
+        model.value = {
           limit: currentLimit.value,
           offset: value
         };
@@ -166,15 +170,17 @@ var script = defineComponent({
     } = useResponsive();
     return {
       root,
+      rootStyles,
       limitButton,
       limitButtonRoot,
       limitMenu,
       limitMenuRoot,
-      rootStyles,
-      offsetControlStyles,
-      limitControlStyles,
+      offsetButton,
+      offsetButtonRoot,
+      offsetMenu,
+      offsetMenuRoot,
       itemStyles,
-      proxyModelValue,
+      model,
       currentLimit,
       currentOffset,
       currentPage,
@@ -202,7 +208,48 @@ var __vue_render__ = function () {
     ref: 'root',
     class: _vm.rootStyles
   }, [_c('div', {
-    class: _vm.offsetControlStyles
+    class: ['layout-row', 'gap-md', 'shrink-0']
+  }, [_vm.features.limit ? [_c('div', {
+    class: ['layout-row', 'gap-sm']
+  }, [_vm._v("\n        Per page:\n\n        "), _c('OrButton', {
+    ref: 'limitButton',
+    class: _vm.itemStyles,
+    attrs: {
+      "variant": 'link',
+      "color": 'inherit',
+      "activated": true
+    },
+    on: {
+      "click": function ($event) {
+        _vm.limitMenu && _vm.limitMenu.open();
+      }
+    }
+  }, [_vm._v("\n          " + _vm._s(_vm.currentLimit) + " "), _c('OrIcon', {
+    attrs: {
+      "icon": _vm.limitMenu && _vm.limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
+    }
+  })], 1), _vm._v(" "), _c('OrMenu', {
+    ref: 'limitMenu',
+    attrs: {
+      "additional-styles": ['min-w-[60px]'],
+      "trigger": _vm.limitButtonRoot,
+      "placement": 'top'
+    }
+  }, _vm._l(_vm.options, function (limit) {
+    return _c('OrMenuItem', {
+      key: limit,
+      attrs: {
+        "selected": _vm.currentLimit === limit
+      },
+      on: {
+        "click": function ($event) {
+          _vm.currentLimit = limit;
+          _vm.limitMenu && _vm.limitMenu.close();
+        }
+      }
+    }, [_vm._v("\n            " + _vm._s(limit) + "\n          ")]);
+  }), 1)], 1)] : _vm._e(), _vm._v(" "), _vm.features.range ? [_vm._v("\n      " + _vm._s(_vm.currentOffset + 1) + "-" + _vm._s(Math.min(_vm.currentOffset + _vm.currentLimit, _vm.length)) + " of " + _vm._s(_vm.length) + "\n    ")] : _vm._e()], 2), _vm._v(" "), _c('div', {
+    class: ['layout-row', 'gap-md', 'shrink-0']
   }, [_c('OrButton', {
     class: _vm.itemStyles,
     attrs: {
@@ -219,7 +266,7 @@ var __vue_render__ = function () {
     attrs: {
       "icon": 'keyboard_arrow_left'
     }
-  })], 1), _vm._v(" "), _vm.isDesktop ? [_vm._l(_vm.buttonGroup, function (page, index) {
+  })], 1), _vm._v(" "), _vm.isDesktop ? _vm._l(_vm.buttonGroup, function (page, index) {
     return _c('OrButton', {
       key: index,
       class: _vm.itemStyles,
@@ -234,26 +281,8 @@ var __vue_render__ = function () {
         }
       }
     }, [_vm._v("\n        " + _vm._s(page) + "\n      ")]);
-  }), _vm._v(" "), _c('OrButton', {
-    class: _vm.itemStyles,
-    attrs: {
-      "variant": 'link',
-      "color": 'inherit',
-      "disabled": _vm.currentPage === _vm.lastPage
-    },
-    on: {
-      "click": function ($event) {
-        return _vm.toNextPage();
-      }
-    }
-  }, [_c('OrIcon', {
-    attrs: {
-      "icon": 'keyboard_arrow_right'
-    }
-  })], 1)] : _vm._e()], 2), _vm._v(" "), _c('div', {
-    class: _vm.limitControlStyles
-  }, [_vm.isDesktop ? [_vm._v("\n      Per page:\n    ")] : _vm._e(), _vm._v(" "), _c('OrButton', {
-    ref: 'limitButton',
+  }) : _vm._e(), _vm._v(" "), _vm.isMobile ? [_c('OrButton', {
+    ref: 'offsetButton',
     class: _vm.itemStyles,
     attrs: {
       "variant": 'link',
@@ -262,33 +291,34 @@ var __vue_render__ = function () {
     },
     on: {
       "click": function ($event) {
-        _vm.limitMenu && _vm.limitMenu.open();
+        _vm.offsetMenu && _vm.offsetMenu.open();
       }
     }
-  }, [_vm._v("\n      " + _vm._s(_vm.currentLimit) + " "), _c('OrIcon', {
+  }, [_vm._v("\n        " + _vm._s(_vm.currentPage) + " "), _c('OrIcon', {
     attrs: {
-      "icon": _vm.limitMenu && _vm.limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
+      "icon": _vm.offsetMenu && _vm.offsetMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
     }
   })], 1), _vm._v(" "), _c('OrMenu', {
-    ref: 'limitMenu',
+    ref: 'offsetMenu',
     attrs: {
       "additional-styles": ['min-w-[60px]'],
-      "trigger": _vm.limitButtonRoot,
+      "trigger": _vm.offsetButtonRoot,
       "placement": 'top'
     }
-  }, _vm._l(_vm.options, function (pageSize) {
+  }, _vm._l(_vm.lastPage, function (page) {
     return _c('OrMenuItem', {
-      key: pageSize,
+      key: page,
+      attrs: {
+        "selected": _vm.currentPage === page
+      },
       on: {
         "click": function ($event) {
-          _vm.currentLimit = pageSize;
-          _vm.limitMenu && _vm.limitMenu.close();
+          _vm.currentPage = page;
+          _vm.offsetMenu && _vm.offsetMenu.close();
         }
       }
-    }, [_vm._v("\n        " + _vm._s(pageSize) + "\n      ")]);
-  }), 1)], 2), _vm._v(" "), _vm.isMobile ? [_c('div', {
-    class: _vm.offsetControlStyles
-  }, [_c('OrButton', {
+    }, [_vm._v("\n          " + _vm._s(page) + "\n        ")]);
+  }), 1)] : _vm._e(), _vm._v(" "), _c('OrButton', {
     class: _vm.itemStyles,
     attrs: {
       "variant": 'link',
@@ -304,7 +334,7 @@ var __vue_render__ = function () {
     attrs: {
       "icon": 'keyboard_arrow_right'
     }
-  })], 1)], 1)] : _vm._e()], 2);
+  })], 1)], 2)]);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/esm/v2/components/index.js

@@ -34,7 +34,7 @@ export { _ as OrCombinedInputV3 } from '../OrCombinedInput-4b19d4b3.js';
 export { _ as OrConfirm } from '../OrConfirm-4b5fdad4.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-b97c00de.js';
 export { _ as OrContextMenuV3 } from '../OrContextMenu-180a83f8.js';
-export { _ as OrDataGridV3 } from '../OrDataGrid-1bdd2499.js';
+export { _ as OrDataGridV3 } from '../OrDataGrid-9e29b831.js';
 export { D as DataGridVariant } from '../OrDataGridToolbar-4611a09b.js';
 export { _ as OrDateFormatV3 } from '../OrDateFormat-5122f872.js';
 export { _ as OrDatePickerV3 } from '../OrDatePicker-83367e4e.js';
@@ -89,7 +89,7 @@ export { _ as OrNumberInput } from '../OrNumberInput-b00163b4.js';
 export { _ as OrOverflowMenu } from '../OrOverflowMenu-7be5525a.js';
 export { _ as OrOverlay } from '../OrOverlay-ccec2218.js';
 export { _ as OrOverlayV3 } from '../OrOverlay-23008721.js';
-export { _ as OrPaginationV3 } from '../OrPagination-1b153a54.js';
+export { _ as OrPaginationV3 } from '../OrPagination-2d6fbd4b.js';
 export { _ as OrPassword } from '../OrPassword-d530c522.js';
 export { _ as OrPopoverV3, a as PopoverPlacement, P as PopoverVariant } from '../OrPopover-8c1fdbe0.js';
 export { i as isPrevented } from '../isPrevented-b151a948.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrDataGridV3 } from '../../OrDataGrid-1bdd2499.js';
+export { _ as OrDataGridV3 } from '../../OrDataGrid-9e29b831.js';
 export { D as DataGridVariant } from '../../OrDataGridToolbar-4611a09b.js';
 import 'vue-demi';
 import '../../OrCheckbox-2536a62d.js';
@@ -17,7 +17,7 @@ import '@onereach/styles/tailwind.config.json';
 import '../../OrLabel-bf7e2ea2.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../../style-inject.es-4c6f2515.js';
-import '../../OrPagination-1b153a54.js';
+import '../../OrPagination-2d6fbd4b.js';
 import '../../useResponsive-1baf3485.js';
 import '../../OrButton-3a743a90.js';
 import '../../OrButton.vue_rollup-plugin-vue_script-e8900483.js';