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

package/src/components/or-pagination-v3/OrPagination.vue

@@ -3,7 +3,46 @@
     :ref="'root'"
     :class="rootStyles"
   >
-    <div :class="offsetControlStyles">
+    <div :class="limitGroupStyles">
+      <template v-if="features.limit">
+        <div :class="['layout-row', 'gap-sm']">
+          Per page:
+
+          <OrButton
+            :ref="'limitButton'"
+            :class="itemStyles"
+            :variant="'link'"
+            :color="'inherit'"
+            :activated="true"
+            @click="limitMenu && limitMenu.open()"
+          >
+            {{ currentLimit }} <OrIcon :icon="limitMenu && limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
+          </OrButton>
+
+          <OrMenu
+            :ref="'limitMenu'"
+            :additional-styles="['min-w-[60px]']"
+            :trigger="limitButtonRoot"
+            :placement="'top'"
+          >
+            <OrMenuItem
+              v-for="limit of options"
+              :key="limit"
+              :selected="currentLimit === limit"
+              @click="currentLimit = limit; limitMenu && limitMenu.close()"
+            >
+              {{ limit }}
+            </OrMenuItem>
+          </OrMenu>
+        </div>
+      </template>
+
+      <template v-if="features.range">
+        {{ currentOffset + 1 }}-{{ Math.min(currentOffset + currentLimit, length) }} of {{ length }}
+      </template>
+    </div>
+
+    <div :class="offsetGroupStyles">
       <OrButton
         :class="itemStyles"
         :variant="'link'"
@@ -16,7 +55,7 @@
 
       <template v-if="isDesktop">
         <OrButton
-          v-for="(page, index) in buttonGroup"
+          v-for="(page, index) of buttonGroup"
           :key="index"
           :class="itemStyles"
           :variant="'link'"
@@ -26,64 +65,47 @@
         >
           {{ page }}
         </OrButton>
+      </template>
 
+      <template v-if="isMobile">
         <OrButton
+          :ref="'offsetButton'"
           :class="itemStyles"
           :variant="'link'"
           :color="'inherit'"
-          :disabled="currentPage === lastPage"
-          @click="toNextPage()"
+          :activated="true"
+          @click="offsetMenu && offsetMenu.open()"
         >
-          <OrIcon :icon="'keyboard_arrow_right'" />
+          {{ currentPage }} <OrIcon :icon="offsetMenu && offsetMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
         </OrButton>
-      </template>
-    </div>
 
-    <div :class="limitControlStyles">
-      <template v-if="isDesktop">
-        Per page:
+        <OrMenu
+          :ref="'offsetMenu'"
+          :additional-styles="['min-w-[60px]']"
+          :trigger="offsetButtonRoot"
+          :placement="'top'"
+        >
+          <OrMenuItem
+            v-for="page of lastPage"
+            :key="page"
+            :selected="currentPage === page"
+            @click="currentPage = page; offsetMenu && offsetMenu.close()"
+          >
+            {{ page }}
+          </OrMenuItem>
+        </OrMenu>
       </template>
 
       <OrButton
-        :ref="'limitButton'"
         :class="itemStyles"
         :variant="'link'"
         :color="'inherit'"
-        :activated="true"
-        @click="limitMenu && limitMenu.open()"
+        :disabled="currentPage === lastPage"
+        @click="toNextPage()"
       >
-        {{ currentLimit }} <OrIcon :icon="limitMenu && limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
+        <OrIcon :icon="'keyboard_arrow_right'" />
       </OrButton>
-
-      <OrMenu
-        :ref="'limitMenu'"
-        :additional-styles="['min-w-[60px]']"
-        :trigger="limitButtonRoot"
-        :placement="'top'"
-      >
-        <OrMenuItem
-          v-for="pageSize in options"
-          :key="pageSize"
-          @click="currentLimit = pageSize; limitMenu && limitMenu.close()"
-        >
-          {{ pageSize }}
-        </OrMenuItem>
-      </OrMenu>
     </div>
-
-    <template v-if="isMobile">
-      <div :class="offsetControlStyles">
-        <OrButton
-          :class="itemStyles"
-          :variant="'link'"
-          :color="'inherit'"
-          :disabled="currentPage === lastPage"
-          @click="toNextPage()"
-        >
-          <OrIcon :icon="'keyboard_arrow_right'" />
-        </OrButton>
-      </div>
-    </template>
   </div>
 </template>
 
@@ -94,8 +116,8 @@ import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
-import { PaginationItem, PaginationLimitControl, PaginationOffsetControl, PaginationRoot } from './styles';
-import { PaginationModelValue } from './types';
+import * as Styles from './styles';
+import { PaginationFeatures, PaginationModelValue } from './types';
 
 export default defineComponent({
   name: 'OrPagination',
@@ -127,6 +149,15 @@ export default defineComponent({
       type: Array as PropType<number[]>,
       default: () => [50, 20, 10, 5],
     },
+
+    features: {
+      type: Object as PropType<PaginationFeatures>,
+
+      default: () => ({
+        limit: true,
+        range: true,
+      }) as PaginationFeatures,
+    },
   },
 
   emits: [
@@ -138,41 +169,46 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
+    const rootStyles = computed(() => [
+      'or-pagination-v3',
+      ...Styles.Pagination,
+    ]);
+
     const limitButton = ref<InstanceType<typeof OrButton>>();
     const limitButtonRoot = computed(() => limitButton.value?.root);
 
     const limitMenu = ref<InstanceType<typeof OrMenu>>();
     const limitMenuRoot = computed(() => limitMenu.value?.root);
 
-    // Styles
-    const rootStyles = computed(() => [
-      'or-pagination-v3',
-      ...PaginationRoot,
+    const limitGroupStyles = computed(() => [
+      ...Styles.PaginationLimitGroup,
     ]);
 
-    const offsetControlStyles = computed(() => [
-      ...PaginationOffsetControl,
-    ]);
+    const offsetButton = ref<InstanceType<typeof OrButton>>();
+    const offsetButtonRoot = computed(() => offsetButton.value?.root);
+
+    const offsetMenu = ref<InstanceType<typeof OrMenu>>();
+    const offsetMenuRoot = computed(() => offsetMenu.value?.root);
 
-    const limitControlStyles = computed(() => [
-      ...PaginationLimitControl,
+    const offsetGroupStyles = computed(() => [
+      ...Styles.PaginationOffsetGroup,
     ]);
 
     const itemStyles = computed(() => [
-      ...PaginationItem,
+      ...Styles.PaginationItem,
     ]);
 
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const currentLimit = computed<number>({
-      get: () => proxyModelValue.value?.limit ?? props.options[0],
+      get: () => model.value?.limit ?? props.options[0],
 
       set: (value) => {
-        proxyModelValue.value = {
+        model.value = {
           limit: value,
           offset: 0,
         };
@@ -180,10 +216,10 @@ export default defineComponent({
     });
 
     const currentOffset = computed<number>({
-      get: () => proxyModelValue.value?.offset ?? 0,
+      get: () => model.value?.offset ?? 0,
 
       set: (value) => {
-        proxyModelValue.value = {
+        model.value = {
           limit: currentLimit.value,
           offset: value,
         };
@@ -267,24 +303,41 @@ export default defineComponent({
 
     return {
       root,
+      rootStyles,
+
       limitButton,
       limitButtonRoot,
+
       limitMenu,
       limitMenuRoot,
-      rootStyles,
-      offsetControlStyles,
-      limitControlStyles,
+
+      limitGroupStyles,
+
+      offsetButton,
+      offsetButtonRoot,
+
+      offsetMenu,
+      offsetMenuRoot,
+
+      offsetGroupStyles,
+
       itemStyles,
-      proxyModelValue,
+
+      model,
+
       currentLimit,
       currentOffset,
       currentPage,
+
       firstPage,
       lastPage,
+
       buttonGroup,
+
       toPreviousPage,
       toNextPage,
       toPage,
+
       isDesktop,
       isMobile,
     };

package/src/components/or-pagination-v3/styles.ts

@@ -1,9 +1,9 @@
-export const PaginationRoot: string[] = [
+export const Pagination: string[] = [
   // Layout
-  'layout-row',
+  'layout-row justify-between md:justify-end',
 
   // Spacing
-  'gap-lg md:gap-xl',
+  'gap-xl',
 
   // Typography
   'typography-caption-regular',
@@ -13,20 +13,20 @@ export const PaginationRoot: string[] = [
   'dark:theme-foreground-outline-dark',
 ];
 
-export const PaginationOffsetControl: string[] = [
+export const PaginationLimitGroup: string[] = [
   // Layout
-  'layout-row',
+  'layout-row shrink-0',
 
   // Spacing
-  'gap-md',
+  'gap-lg md:gap-md',
 ];
 
-export const PaginationLimitControl: string[] = [
+export const PaginationOffsetGroup: string[] = [
   // Layout
-  'layout-row',
+  'layout-row shrink-0',
 
   // Spacing
-  'gap-sm',
+  'gap-md',
 ];
 
 export const PaginationItem: string[] = [

package/src/components/or-pagination-v3/types.ts

@@ -4,3 +4,8 @@ export type PaginationModelValue = ModelValue<{
   limit: number;
   offset: number;
 }>;
+
+export type PaginationFeatures = {
+  limit?: boolean;
+  range?: boolean;
+};