@onereach/ui-components 11.2.1 → 11.2.2-beta.4404.0

package/dist/bundled/v2/components/OrDataGridV3/OrDataGrid.js

@@ -1,2 +1,2 @@
-export { _ as default } from '../../OrDataGrid-59e12d35.js';
+export { _ as default } from '../../OrDataGrid-e20adf12.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrDataGridV3/index.js

@@ -1 +1 @@
-export { D as DataGridVariant, _ as OrDataGridV3 } from '../../OrDataGrid-59e12d35.js';
+export { D as DataGridVariant, _ as OrDataGridV3 } from '../../OrDataGrid-e20adf12.js';

package/dist/bundled/v2/components/OrPaginationV3/OrPagination.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import { PaginationRoot, PaginationOffsetControl, PaginationLimitControl, PaginationItem } from './styles.js';
+import { Pagination, PaginationItem } from './styles.js';
 import __vue_component__$1 from '../OrButtonV3/OrButton.js';
 import __vue_component__$2 from '../OrIconV3/OrIcon.js';
 import __vue_component__$3 from '../OrMenuV3/OrMenu.js';
@@ -37,8 +37,9 @@ var script = defineComponent({
   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;
@@ -49,20 +50,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
         };
@@ -71,10 +78,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
         };
@@ -137,15 +144,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,
@@ -173,7 +182,48 @@ var __vue_render__ = function () {
     ref: 'root',
     class: _vm.rootStyles
   }, [_c('div', {
-    class: _vm.offsetControlStyles
+    class: ['layout-row', 'gap-md', 'shrink-0']
+  }, [_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._v("\n\n    " + _vm._s(_vm.currentOffset + 1) + "-" + _vm._s(Math.min(_vm.currentOffset + _vm.currentLimit, _vm.length)) + " of " + _vm._s(_vm.length) + "\n  ")]), _vm._v(" "), _c('div', {
+    class: ['layout-row', 'gap-md', 'shrink-0']
   }, [_c('OrButton', {
     class: _vm.itemStyles,
     attrs: {
@@ -190,7 +240,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,
@@ -205,26 +255,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',
@@ -233,33 +265,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',
@@ -275,7 +308,7 @@ var __vue_render__ = function () {
     attrs: {
       "icon": 'keyboard_arrow_right'
     }
-  })], 1)], 1)] : _vm._e()], 2);
+  })], 1)], 2)]);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrPaginationV3/OrPagination.vue.d.ts

@@ -2,6 +2,7 @@ import { PropType } from 'vue-demi';
 import { PaginationModelValue } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     limitButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -14,11 +15,20 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     limitMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    offsetControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    limitControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    offsetButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    offsetButtonRoot: import("@vue/composition-api").ComputedRef<undefined>;
+    offsetMenu: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    offsetMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
     itemStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<PaginationModelValue>;
+    model: import("../../hooks").UseProxyModelValueReturn<PaginationModelValue>;
     currentLimit: import("@vue/composition-api").WritableComputedRef<number>;
     currentOffset: import("@vue/composition-api").WritableComputedRef<number>;
     currentPage: import("@vue/composition-api").WritableComputedRef<number>;
@@ -64,6 +74,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     limitButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -76,11 +87,20 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     limitMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    offsetControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    limitControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    offsetButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    offsetButtonRoot: import("@vue/composition-api").ComputedRef<undefined>;
+    offsetMenu: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    offsetMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
     itemStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<PaginationModelValue>;
+    model: import("../../hooks").UseProxyModelValueReturn<PaginationModelValue>;
     currentLimit: import("@vue/composition-api").WritableComputedRef<number>;
     currentOffset: import("@vue/composition-api").WritableComputedRef<number>;
     currentPage: import("@vue/composition-api").WritableComputedRef<number>;

package/dist/bundled/v2/components/OrPaginationV3/styles.d.ts

@@ -1,4 +1,2 @@
-export declare const PaginationRoot: string[];
-export declare const PaginationOffsetControl: string[];
-export declare const PaginationLimitControl: string[];
+export declare const Pagination: string[];
 export declare const PaginationItem: string[];

package/dist/bundled/v2/components/OrPaginationV3/styles.js

@@ -1,4 +1,4 @@
-const PaginationRoot = [
+const Pagination = [
 // Layout
 'layout-row',
 // Spacing
@@ -7,20 +7,10 @@ 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',
 // Typography (activated)
 'activated:typography-caption-bold'];
 
-export { PaginationItem, PaginationLimitControl, PaginationOffsetControl, PaginationRoot };
+export { Pagination, PaginationItem };

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

@@ -44,7 +44,7 @@ export { default as OrConfirm } from './OrConfirm/OrConfirm.js';
 export { default as OrConfirmV3 } from './OrConfirmV3/OrConfirm.js';
 export { ConfirmType } from './OrConfirmV3/props.js';
 export { default as OrContextMenuV3 } from './OrContextMenuV3/OrContextMenu.js';
-export { D as DataGridVariant, _ as OrDataGridV3 } from '../OrDataGrid-59e12d35.js';
+export { D as DataGridVariant, _ as OrDataGridV3 } from '../OrDataGrid-e20adf12.js';
 export { default as OrDateFormatV3 } from './OrDateFormatV3/OrDateFormat.js';
 export { default as OrDatePickerV3 } from './OrDatePickerV3/OrDatePicker.js';
 export { default as OrDateRangePickerV3 } from './OrDateRangePickerV3/OrDateRangePicker.js';

package/dist/bundled/v2/index.js

@@ -18,7 +18,7 @@ export { default as OrCombinedInputV3 } from './components/OrCombinedInputV3/OrC
 export { default as OrConfirm } from './components/OrConfirm/OrConfirm.js';
 export { default as OrConfirmV3 } from './components/OrConfirmV3/OrConfirm.js';
 export { default as OrContextMenuV3 } from './components/OrContextMenuV3/OrContextMenu.js';
-export { D as DataGridVariant, _ as OrDataGridV3 } from './OrDataGrid-59e12d35.js';
+export { D as DataGridVariant, _ as OrDataGridV3 } from './OrDataGrid-e20adf12.js';
 export { default as OrDateFormatV3 } from './components/OrDateFormatV3/OrDateFormat.js';
 export { default as OrDatePickerV3 } from './components/OrDatePickerV3/OrDatePicker.js';
 export { default as OrDateRangePickerV3 } from './components/OrDateRangePickerV3/OrDateRangePicker.js';

package/dist/bundled/v3/components/OrDataGridV3/OrDataGrid.js

@@ -1 +1 @@
-export { s as default } from '../OrDataGridV3-355e1035.js';
+export { s as default } from '../OrDataGridV3-7fd8849b.js';

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

@@ -1 +1 @@
-export { D as DataGridVariant, s as OrDataGridV3 } from '../OrDataGridV3-355e1035.js';
+export { D as DataGridVariant, s as OrDataGridV3 } from '../OrDataGridV3-7fd8849b.js';

package/dist/bundled/v3/components/OrDataGridV3/styles.js

@@ -1 +1 @@
-export { a as DataGrid } from '../OrDataGridV3-355e1035.js';
+export { a as DataGrid } from '../OrDataGridV3-7fd8849b.js';

package/dist/bundled/v3/components/{OrDataGridV3-355e1035.js → OrDataGridV3-7fd8849b.js}

@@ -2,7 +2,7 @@ import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommen
 import { defineComponent, ref, computed } from 'vue-demi';
 import { s as script$e } from './OrIconV3-34670800.js';
 import { s as script$f } from './OrCheckboxV3-a59d6415.js';
-import { s as script$g } from './OrPaginationV3-48298a86.js';
+import { s as script$g } from './OrPaginationV3-56fef1c8.js';
 import script$h from './OrSearchV3/OrSearch.js';
 
 const DataGridFooter = [

package/dist/bundled/v3/components/OrPaginationV3/OrPagination.js

@@ -1 +1 @@
-export { s as default } from '../OrPaginationV3-48298a86.js';
+export { s as default } from '../OrPaginationV3-56fef1c8.js';

package/dist/bundled/v3/components/OrPaginationV3/OrPagination.vue.d.ts

@@ -15,15 +15,17 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
     limitButton: import("vue-demi").Ref<any>;
     limitButtonRoot: import("vue-demi").ComputedRef<any>;
     limitMenu: import("vue-demi").Ref<any>;
     limitMenuRoot: import("vue-demi").ComputedRef<any>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
-    offsetControlStyles: import("vue-demi").ComputedRef<string[]>;
-    limitControlStyles: import("vue-demi").ComputedRef<string[]>;
+    offsetButton: import("vue-demi").Ref<any>;
+    offsetButtonRoot: import("vue-demi").ComputedRef<any>;
+    offsetMenu: import("vue-demi").Ref<any>;
+    offsetMenuRoot: import("vue-demi").ComputedRef<any>;
     itemStyles: import("vue-demi").ComputedRef<string[]>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<PaginationModelValue>;
+    model: import("../../hooks").UseProxyModelValueReturn<PaginationModelValue>;
     currentLimit: import("vue-demi").WritableComputedRef<number>;
     currentOffset: import("vue-demi").WritableComputedRef<number>;
     currentPage: import("vue-demi").WritableComputedRef<number>;

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

@@ -1 +1 @@
-export { s as OrPaginationV3 } from '../OrPaginationV3-48298a86.js';
+export { s as OrPaginationV3 } from '../OrPaginationV3-56fef1c8.js';

package/dist/bundled/v3/components/OrPaginationV3/styles.d.ts

@@ -1,4 +1,2 @@
-export declare const PaginationRoot: string[];
-export declare const PaginationOffsetControl: string[];
-export declare const PaginationLimitControl: string[];
+export declare const Pagination: string[];
 export declare const PaginationItem: string[];

package/dist/bundled/v3/components/OrPaginationV3/styles.js

@@ -1 +1 @@
-export { c as PaginationItem, b as PaginationLimitControl, a as PaginationOffsetControl, P as PaginationRoot } from '../OrPaginationV3-48298a86.js';
+export { P as Pagination, a as PaginationItem } from '../OrPaginationV3-56fef1c8.js';